@import"https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Jua&display=swap";:root{--font-display: "Gaegu", "Jua", "LG Smart UI", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;--font-body: "LG Smart UI", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;--bg: #fef9f3;--bg-grid: #fbeede;--surface: #ffffff;--surface-soft: #fff6ec;--surface-elevated: #ffffff;--text: #2b2438;--text-soft: #6b5e7d;--text-faint: #a99cb8;--text-invert: #ffffff;--brand: #c94a20;--brand-deep: #9f3517;--brand-soft: #ffe2d5;--accent: #4cb9ff;--accent-soft: #def1ff;--ok: #1b7f50;--ok-deep: #12633e;--ok-soft: #d6f3e4;--warn: #ffb020;--warn-soft: #fff1d0;--error: #e8556a;--error-soft: #ffe0e5;--info: #4cb9ff;--info-soft: #def1ff;--energy-chemical: #b266ff;--energy-electrical: #ffc233;--energy-light: #ffd23f;--energy-motion: #4cb9ff;--energy-sound: #38d9a9;--energy-thermal: #ff6b6b;--energy-chemical-text: #6f3ea8;--energy-electrical-text: #765300;--energy-light-text: #765600;--energy-motion-text: #155b83;--energy-sound-text: #0c6b50;--energy-thermal-text: #9c2f3b;--energy-chemical-soft: #ede0ff;--energy-electrical-soft: #fff3cc;--energy-light-soft: #fff4cc;--energy-motion-soft: #def1ff;--energy-sound-soft: #d4f5ec;--energy-thermal-soft: #ffe0e0;--line: #f0e3d2;--line-strong: #e0cdb3;--line-invert: rgba(255, 255, 255, .6);--r-xs: 8px;--r-sm: 12px;--r-md: 18px;--r-lg: 24px;--r-xl: 32px;--r-pill: 999px;--s-1: 4px;--s-2: 8px;--s-3: 12px;--s-4: 16px;--s-5: 24px;--s-6: 32px;--s-7: 48px;--s-8: 64px;--shadow-sm: 0 2px 8px rgba(120, 80, 40, .08);--shadow-md: 0 6px 20px rgba(120, 80, 40, .1);--shadow-lg: 0 14px 40px rgba(120, 80, 40, .14);--shadow-pop: 0 8px 0 rgba(120, 80, 40, .12);--touch: 48px;--t-display: clamp(2.4rem, 6vw, 4rem);--t-h1: clamp(1.8rem, 4vw, 2.6rem);--t-h2: clamp(1.4rem, 3vw, 1.9rem);--t-h3: clamp(1.15rem, 2.4vw, 1.4rem);--t-body: 1.0625rem;--t-small: .9375rem;--t-caption: .8125rem;--ease: cubic-bezier(.34, 1.56, .64, 1);--ease-soft: cubic-bezier(.4, 0, .2, 1);--dur-fast: .14s;--dur: .24s;--dur-slow: .48s}:root[data-reduce-motion=true] *,:root[data-reduce-motion=true] *:before,:root[data-reduce-motion=true]{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto!important}}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-body);color:var(--text);background-color:var(--bg);background-image:radial-gradient(var(--bg-grid) 1.5px,transparent 1.5px);background-size:22px 22px;background-position:-11px -11px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100dvh;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#root{display:flex;flex-direction:column}h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;font-weight:700;color:var(--text)}button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:var(--s-4);top:-100px;background:var(--brand);color:var(--text-invert);padding:var(--s-3) var(--s-5);border-radius:var(--r-md);z-index:1000;font-weight:700;transition:top var(--dur) var(--ease)}.skip-link:focus{top:var(--s-4)}::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:var(--r-pill);border:3px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:var(--brand)}.app{flex:1;display:flex;flex-direction:column;width:100%;max-width:1180px;margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-8)}.topbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5)}.topbar__brand{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-display);font-size:var(--t-h3);font-weight:700;color:var(--brand-deep)}.topbar__brand-badge{font-size:1.4rem;line-height:1}.topbar__spacer{flex:1}.topbar__settings{display:flex;gap:var(--s-2);align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--touch);padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font-weight:700;font-size:var(--t-body);background:var(--surface);color:var(--text);border:2px solid var(--line-strong);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft);-webkit-user-select:none;user-select:none}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}.btn:active:not(:disabled){transform:translateY(1px);box-shadow:var(--shadow-sm)}.btn:disabled{opacity:.55;box-shadow:none;cursor:not-allowed;filter:grayscale(.3)}.btn--primary{background:var(--brand);color:var(--text-invert);border-color:var(--brand-deep);box-shadow:var(--shadow-pop)}.btn--primary:hover:not(:disabled){background:var(--brand-deep);border-color:var(--brand-deep)}.btn--ghost{background:transparent;border-color:transparent;box-shadow:none}.btn--ghost:hover:not(:disabled){background:var(--surface-soft);transform:none}.btn--sm{min-height:44px;padding:var(--s-2) var(--s-4);font-size:var(--t-small)}.btn--icon{min-height:var(--touch);min-width:var(--touch);padding:var(--s-2);border-radius:var(--r-md);font-size:1.3rem}.panel{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--shadow-sm)}.panel--soft{background:var(--surface-soft)}.chip{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);font-size:var(--t-caption);font-weight:700;background:var(--brand-soft);color:var(--brand-deep)}.chip--ok{background:var(--ok-soft);color:var(--ok-deep)}.chip--info{background:var(--info-soft);color:#2a7fb8}.chip--virtual{background:var(--accent-soft);color:#2a7fb8}.energy-badge{--ec: var(--brand);--ec-soft: var(--brand-soft);display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);background:var(--ec-soft);color:var(--ec-text, var(--brand-deep));border:2px solid color-mix(in srgb,var(--ec-text, var(--brand-deep)) 45%,transparent);font-weight:700;font-size:var(--t-small)}.energy-badge__icon{width:1.3em;height:1.3em;flex-shrink:0}.energy-badge--lg{padding:var(--s-3) var(--s-4);font-size:var(--t-body)}.energy-badge--lg .energy-badge__icon{width:1.6em;height:1.6em}.form-card{--ec: var(--brand);--ec-soft: var(--brand-soft);background:var(--surface);border:2px solid color-mix(in srgb,var(--ec) 30%,var(--line));border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);position:relative;overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.form-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:var(--pattern, none);background-size:24px 24px;opacity:.12;pointer-events:none}.form-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.form-card__head{display:flex;align-items:center;gap:var(--s-2);position:relative;z-index:1}.form-card__icon{width:2.4rem;height:2.4rem;flex-shrink:0;color:var(--ec)}.form-card__name{font-family:var(--font-display);font-size:var(--t-h3);color:var(--text)}.form-card__desc{position:relative;z-index:1;color:var(--text-soft);font-size:var(--t-small)}.form-card__observable{position:relative;z-index:1;margin-top:auto;font-size:var(--t-caption);color:color-mix(in srgb,var(--ec) 70%,#000);font-weight:700}.device-card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);text-align:left;min-height:var(--touch);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease-soft)}.device-card:hover:not(:disabled){transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)}.device-card--selected{border-color:var(--brand);background:var(--brand-soft);box-shadow:var(--shadow-pop)}.device-card--disabled{opacity:.45;cursor:not-allowed}.device-card__head{display:flex;align-items:center;gap:var(--s-2)}.device-card__emoji{font-size:2rem;line-height:1}.device-card__name{font-family:var(--font-display);font-size:var(--t-h3)}.device-card__desc{color:var(--text-soft);font-size:var(--t-small)}.device-card__io{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-1)}.arrow{display:inline-flex;align-items:center;justify-content:center;color:var(--brand);position:relative}.arrow__line{display:block;height:4px;width:var(--arrow-len, 56px);background:var(--brand);border-radius:var(--r-pill);position:relative}.arrow__line:after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-left:12px solid var(--brand)}.arrow__label{position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:var(--t-caption);color:var(--brand-deep);font-weight:700;white-space:nowrap;background:var(--surface);padding:0 var(--s-2);border-radius:var(--r-pill)}.arrow--vertical{flex-direction:column}.arrow--vertical .arrow__line{width:4px;height:var(--arrow-len, 56px)}.arrow--vertical .arrow__line:after{top:auto;bottom:-2px;left:50%;transform:translate(-50%);border:8px solid transparent;border-top:12px solid var(--brand)}.arrow--vertical .arrow__label{top:50%;left:auto;right:calc(100% + var(--s-2));transform:translateY(-50%)}.arrow__line--flow{background-image:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);background-size:40px 100%;background-repeat:no-repeat;animation:flow 1.2s linear infinite}.arrow--vertical .arrow__line--flow{background-image:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);background-size:100% 40px}@keyframes flow{0%{background-position:-40px 0}to{background-position:100% 0}}:root[data-reduce-motion=true] .arrow__line--flow{animation:none}.relay-builder{display:flex;flex-direction:column;gap:var(--s-5)}.relay-track{display:flex;align-items:stretch;gap:var(--s-2);overflow-x:auto;padding:var(--s-4) var(--s-2);scroll-snap-type:x mandatory}.relay-track>*{scroll-snap-align:center;flex-shrink:0}.relay-step{display:flex;flex-direction:column;gap:var(--s-2);align-items:stretch;min-width:180px}.relay-step__slot{background:var(--surface);border:2px dashed var(--line-strong);border-radius:var(--r-lg);padding:var(--s-3);min-height:120px;display:flex;flex-direction:column;gap:var(--s-2);justify-content:center;align-items:center;text-align:center}.relay-step__slot--filled{border-style:solid;background:var(--surface-soft)}.relay-step__slot--battery{border-color:var(--energy-chemical);background:var(--energy-chemical-soft)}.relay-step__index{font-size:var(--t-caption);font-weight:700;color:var(--text-faint)}.relay-step__device-emoji{font-size:2.4rem;line-height:1}.relay-step__device-name{font-family:var(--font-display);font-size:var(--t-body)}.relay-step__output-area{margin-top:var(--s-2);display:flex;flex-direction:column;gap:var(--s-2);align-items:center}.relay-step__connector{display:flex;align-items:center;justify-content:center;align-self:center}.tray{background:var(--surface-soft);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s-4)}.tray__title{font-family:var(--font-display);font-size:var(--t-h3);margin-bottom:var(--s-3);display:flex;align-items:center;gap:var(--s-2)}.tray__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3)}.feedback{border-radius:var(--r-lg);padding:var(--s-4);border:2px solid;display:flex;gap:var(--s-3);align-items:flex-start;font-weight:600;animation:pop-in var(--dur) var(--ease)}.feedback__icon{font-size:1.5rem;flex-shrink:0}.feedback--ok{background:var(--ok-soft);border-color:var(--ok);color:var(--ok-deep)}.feedback--info{background:var(--info-soft);border-color:var(--info);color:#2a7fb8}.feedback--warn{background:var(--warn-soft);border-color:var(--warn);color:#9a6400}@keyframes pop-in{0%{opacity:0;transform:scale(.9) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}.sentence-builder{display:flex;flex-direction:column;gap:var(--s-3)}.sentence-builder__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);font-size:var(--t-body);line-height:1.8}.sentence-builder__blank{display:inline-flex;align-items:center;min-height:40px;padding:var(--s-1) var(--s-3);border:2px dashed var(--brand);border-radius:var(--r-md);background:var(--brand-soft);color:var(--brand-deep);font-weight:700}.sentence-builder__options{display:flex;flex-wrap:wrap;gap:var(--s-2)}.sentence-builder__option{padding:var(--s-2) var(--s-4);min-height:44px;border-radius:var(--r-pill);border:2px solid var(--line-strong);background:var(--surface);font-weight:700;font-size:var(--t-small);transition:border-color var(--dur-fast) var(--ease-soft),background var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease)}.sentence-builder__option:hover{border-color:var(--brand);transform:translateY(-1px)}.sentence-builder__option--selected{background:var(--brand);color:var(--text-invert);border-color:var(--brand-deep)}.sentence-builder__feedback{margin:var(--s-2) 0 0 2em;font-size:var(--t-small);font-weight:700}.sentence-builder__feedback--ok{color:var(--ok-deep)}.sentence-builder__feedback--error{color:var(--error)}.start{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--s-5);padding:var(--s-6) var(--s-3)}.start__title{font-size:var(--t-display);color:var(--brand-deep);text-shadow:3px 3px 0 var(--brand-soft)}.start__subtitle{font-size:var(--t-h3);color:var(--text-soft);max-width:28ch}.start__notice{max-width:560px;background:var(--surface);border:2px solid var(--line);border-left:8px solid var(--brand);border-radius:var(--r-lg);padding:var(--s-4) var(--s-5);text-align:left;font-size:var(--t-body);color:var(--text);box-shadow:var(--shadow-sm)}.start__notice strong{color:var(--brand-deep)}.start__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center}.start__emojis{font-size:3rem;display:flex;gap:var(--s-3)}.mission-select__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-4)}.mission-tile-wrapper{display:flex;flex-direction:column;gap:var(--s-1)}.mission-tile{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5);text-align:left;display:flex;flex-direction:column;gap:var(--s-2);flex:1;width:100%;min-height:var(--touch);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease-soft);position:relative;overflow:hidden}.mission-tile:hover:not(:disabled){transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--brand)}.mission-tile__num{font-family:var(--font-display);font-size:3rem;color:var(--brand-soft);line-height:1;position:absolute;top:var(--s-2);right:var(--s-4)}.mission-tile__title{font-family:var(--font-display);font-size:var(--t-h2);color:var(--brand-deep);padding:0 var(--s-1)}.mission-tile__subtitle{color:var(--text-soft);font-size:var(--t-small)}.mission-tile__kind{margin-top:auto}.screen-head{margin-bottom:var(--s-5)}.screen-head__title{font-size:var(--t-h1);color:var(--brand-deep)}.screen-head__subtitle{color:var(--text-soft);font-size:var(--t-body);margin-top:var(--s-1)}.screen-head__back{margin-bottom:var(--s-3)}.progress-trail{width:min(1180px,calc(100% - 2 * var(--s-4)));margin:0 auto var(--s-2);color:var(--text-faint)}.progress-trail ol{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);list-style:none;padding:0}.progress-trail li{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--t-caption);font-weight:700;white-space:nowrap}.progress-trail__number{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid var(--line-strong);border-radius:50%;background:var(--surface)}.progress-trail li[aria-current=step]{color:var(--brand-deep)}.progress-trail li[aria-current=step] .progress-trail__number{border-color:var(--brand-deep);background:var(--brand-soft);color:var(--brand-deep)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#2b24388c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:var(--s-4);z-index:100;animation:fade-in var(--dur) var(--ease-soft);overscroll-behavior:contain}.modal{background:var(--surface);border-radius:var(--r-xl);padding:var(--s-6);max-width:560px;width:100%;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-lg);animation:pop-in var(--dur) var(--ease)}.modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}.modal__title{font-family:var(--font-display);font-size:var(--t-h2);color:var(--brand-deep)}.modal__list{list-style:none;display:flex;flex-direction:column;gap:var(--s-3)}.modal__list li{padding:var(--s-3) var(--s-4);background:var(--surface-soft);border-radius:var(--r-md);border-left:5px solid var(--brand)}.modal__list time{display:block;font-weight:700;color:var(--brand-deep);font-size:var(--t-small);margin-bottom:var(--s-1)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.run{display:flex;flex-direction:column;align-items:center;gap:var(--s-6);padding:var(--s-5) var(--s-3)}.run__stage{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:center}.run__actor{font-size:4rem;display:inline-flex;align-items:center;justify-content:center;width:110px;height:110px;border-radius:var(--r-xl);background:var(--surface);border:2px solid var(--line);box-shadow:var(--shadow-sm)}.run__actor--on{animation:jiggle .6s var(--ease) infinite}.run__actor--bulb{background:radial-gradient(circle at 50% 40%,var(--energy-light-soft),var(--surface))}@keyframes jiggle{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.08) rotate(-4deg)}75%{transform:scale(1.08) rotate(4deg)}}:root[data-reduce-motion=true] .run__actor--on{animation:none;filter:drop-shadow(0 0 12px var(--energy-light))}.result-card{background:linear-gradient(160deg,var(--surface),var(--surface-soft));border:2px solid var(--line-strong);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:var(--shadow-lg)}.result-card__title{font-family:var(--font-display);font-size:var(--t-h1);color:var(--brand-deep);text-align:center;margin-bottom:var(--s-4)}.comparison-panel,.reflection-question{margin-top:var(--s-5)}.comparison-panel__title,.reflection-question__title{font-family:var(--font-display);font-size:var(--t-h2);margin-bottom:var(--s-2)}.comparison-panel__intro{color:var(--text-soft);margin-bottom:var(--s-4)}.comparison-panel__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}.comparison-panel__item{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);padding:var(--s-4);background:var(--surface-soft);border:2px solid var(--line);border-radius:var(--r-md);text-align:center}.comparison-panel__device{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-display);font-size:var(--t-h3)}.comparison-panel__emoji{font-size:1.8rem}.comparison-panel__arrow{color:var(--text-soft);font-size:var(--t-small);font-weight:700}.comparison-panel__item p{color:var(--text-soft);font-size:var(--t-small)}.reflection-question>p{color:var(--text-soft);margin-bottom:var(--s-3)}.reflection-question__options{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}.reflection-question__option{min-height:44px;padding:var(--s-2) var(--s-4);border:2px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-weight:700;transition:border-color var(--dur-fast) var(--ease-soft),background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease)}.reflection-question__option:hover,.reflection-question__option--selected{border-color:var(--brand-deep);background:var(--brand-soft);transform:translateY(-1px)}.reflection-question .feedback{margin-top:var(--s-3)}.result-card__section{margin-bottom:var(--s-4)}.result-card__label{font-size:var(--t-caption);font-weight:700;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s-2)}.result-card__chain{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}.result-card__sentence{background:var(--brand-soft);border-radius:var(--r-md);padding:var(--s-4);font-size:var(--t-h3);font-family:var(--font-display);color:var(--brand-deep);text-align:center}.toggle{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-small);font-weight:700;color:var(--text-soft);cursor:pointer;padding:var(--s-2) var(--s-3);border-radius:var(--r-pill);background:var(--surface);border:2px solid var(--line);min-height:44px}.toggle__track{width:38px;height:22px;border-radius:var(--r-pill);background:var(--line-strong);position:relative;transition:background var(--dur) var(--ease-soft);flex-shrink:0}.toggle__track:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease)}.toggle--on .toggle__track{background:var(--ok)}.toggle--on .toggle__track:after{transform:translate(16px)}.codex__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s-4)}.help-box{background:var(--info-soft);border:2px solid var(--info);border-radius:var(--r-lg);padding:var(--s-4);color:#2a5e80;font-size:var(--t-small);display:flex;gap:var(--s-3);align-items:flex-start}.help-box__icon{font-size:1.4rem;flex-shrink:0}@media (max-width: 640px){.app{padding:var(--s-4) var(--s-3) var(--s-7)}.relay-track{flex-direction:column;overflow-x:visible}.relay-step{min-width:0;width:100%}.relay-step__connector{transform:rotate(90deg)}.topbar{gap:var(--s-2)}.topbar__settings{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:stretch}.topbar__settings .toggle{min-width:0;justify-content:center;padding-inline:var(--s-2)}.start__title{font-size:clamp(2rem,10vw,3rem)}.comparison-panel__grid{grid-template-columns:1fr}}.copy-area{position:relative}.copy-area__btn{position:absolute;top:var(--s-2);right:var(--s-2)}.copy-toast{position:fixed;bottom:var(--s-5);left:50%;transform:translate(-50%);background:var(--text);color:var(--text-invert);padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font-weight:700;z-index:200;box-shadow:var(--shadow-lg);animation:pop-in var(--dur) var(--ease)}.copy-area__status{display:block;margin:var(--s-2) var(--s-2) 0 auto;max-width:18rem;color:var(--error);font-size:var(--t-caption);font-weight:700;text-align:right}.gi-pulse{animation:gi-pulse 2.4s ease-in-out infinite}.gi-pulse:disabled{animation:none}@keyframes gi-pulse{0%,to{box-shadow:var(--shadow-sm),0 0 #c94a2047}50%{box-shadow:var(--shadow-md),0 0 0 7px #c94a2014}}:root[data-reduce-motion=true] .gi-pulse{animation:none}@media (prefers-reduced-motion: reduce){.gi-pulse{animation:none}}