:root{--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-xxl: 32px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-bold: 700;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 40px;--color-navy: #24388d;--color-light-blue: #7ac4e0;--color-accent: #e4f4fc;--color-black: #000000;--color-text-strong: #222;--color-text-default: #555;--color-text-light: #888;--color-text-white: #fff;--color-bg: #ffffff;--color-bg-light: #f9f9f9;--color-border: #ddd;--btn-radius: 6px;--btn-padding: 10px 16px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 3px 6px rgba(0, 0, 0, .15);--shadow-lg: 0 5px 10px rgba(0, 0, 0, .2);--transition-fast: .2s ease-in-out;--transition-slow: .4s ease-in-out}body{margin:0;padding:2rem;background-color:var(--color-bg-light)}h1,h2{margin-bottom:var(--space-4)}.component-box{border:1px var(--color-black);padding:2rem;margin-bottom:2rem;background-color:var(--color-bg);border-radius:8px}.label label{display:inline-flex;background-color:var(--color-bg-light);color:var(--color-navy);width:100%;height:35px;cursor:pointer;padding:var(--btn-padding);justify-content:center;align-items:center}.label input[type=radio]:checked+label{background-color:var(--color-navy);color:var(--color-text-white)}input[type=radio]:focus+label{outline:3px solid var(--color-black);outline-offset:2px;position:relative;z-index:50}.search-input{display:inline-flex;justify-content:space-between;width:100%;height:45px;border:8px solid var(--color-navy);padding-left:var(--space-3);margin-bottom:3px;background-color:var(--color-bg)}.search-input input[type=text],.search-input button{border:none;box-shadow:none;background:transparent}.search-input input::placeholder{color:var(--color-navy)}.search-result{border:3px solid var(--color-border);background-color:var(--color-bg);padding:var(--space-3);margin-top:-3px}.search-result figure{color:var(--color-navy);display:flex;gap:var(--space-3)}.search-result figcaption{display:flex;flex-direction:column;gap:var(--space-1)}.tab-menu-wrapper{display:flex;flex-flow:column;width:100%;align-items:start}.tab-menu-wrapper .label{display:flex;width:100%}.tab-menu-wrapper .label .tab-menu{width:100%}.tab-menu-wrapper .label input[type=radio]{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;overflow:hidden}