:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--paper:#f2f1ec;--paper-card:#fbfaf7;--paper-sunk:#e9e8e2;--ink:#16202e;--ink-soft:#4a5666;--ink-faint:#5a6572;--rule:#c8cbc1;--rule-strong:#838a7e;--warp:#27407b;--warp-soft:#dfe4f0;--weft:#c2422b;--weft-soft:#f6e2dc;--dye-indigo:#27407b;--dye-rust:#c2422b;--dye-moss:#4c6141;--dye-ochre:#b8801f;--dye-plum:#6d3350;--dye-charcoal:#2f3439;--dye-lilac:#7d7b9c;--warn:#a2620c;--warn-soft:#f6ecda;--ok:#2f6b4f;--focus:#1b4fd8;--radius:14px;--radius-sm:10px;--shadow-lift:0 1px 2px #16202e14, 0 12px 28px -18px #16202e57;--shadow-pop:0 2px 4px #16202e1a, 0 24px 52px -22px #16202e61;--font-ui:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;--step-0:clamp(.94rem, .9rem + .2vw, 1rem);--step-1:clamp(1.06rem, 1rem + .3vw, 1.2rem);--step-2:clamp(1.24rem, 1.1rem + .6vw, 1.6rem);--step-3:clamp(1.5rem, 1.25rem + 1.1vw, 2.2rem);--step-4:clamp(1.85rem, 1.4rem + 2vw, 3rem);--gap-1:4px;--gap-2:8px;--gap-3:12px;--gap-4:16px;--gap-5:24px;--gap-6:32px;--gap-7:48px;--duration:.18s;--ease-out:cubic-bezier(.16, 1, .3, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:var(--step-0);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;margin:0;line-height:1.6}h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}ul,ol{padding:0;list-style:none}button{font:inherit;color:inherit}::selection{background:var(--warp-soft);color:var(--ink)}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}.app{flex-direction:column;min-height:100dvh;padding-bottom:96px;display:flex}.topbar{align-items:center;gap:var(--gap-4);padding:var(--gap-3) clamp(16px, 4vw, 40px);border-bottom:1px solid var(--rule);background:var(--paper);z-index:30;display:flex;position:sticky;top:0}.topbar__mark{align-items:baseline;gap:var(--gap-2);letter-spacing:-.02em;font-weight:700;font-size:var(--step-1);display:flex}.topbar__mark span{color:var(--ink-faint);letter-spacing:.02em;font-size:.8rem;font-weight:500}.topbar__spacer{flex:1}.ghost-button{border:1px solid var(--rule-strong);border-radius:var(--radius-sm);min-height:40px;color:var(--ink-soft);cursor:pointer;transition:background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);background:0 0;align-items:center;gap:6px;padding:0 12px;display:inline-flex}.ghost-button:hover{background:var(--paper-sunk);color:var(--ink)}.ghost-button--sm{min-height:32px;font-size:.84rem}.stages{gap:var(--gap-2) var(--gap-4);padding:var(--gap-3) clamp(16px, 4vw, 40px);border-bottom:1px solid var(--rule);background:var(--paper-card);color:var(--ink-faint);flex-wrap:wrap;font-size:.84rem;display:flex}.stages__item{align-items:center;gap:6px;display:inline-flex}.stages__item[data-state=current]{color:var(--ink);font-weight:600}.stages__item[data-state=done]{color:var(--ok)}.stages__num{font-variant-numeric:tabular-nums;border:1px solid;border-radius:999px;place-items:center;width:20px;height:20px;font-size:.72rem;line-height:1;display:grid}.workspace{width:min(1280px,100%);padding:var(--gap-5) clamp(16px, 4vw, 40px) var(--gap-6);gap:var(--gap-5);flex:1;grid-template-columns:minmax(280px,360px) minmax(0,1fr);align-items:start;margin:0 auto;display:grid}.workspace__side{gap:var(--gap-5);display:grid;position:sticky;top:128px}.workspace__main{gap:var(--gap-5);min-width:0;display:grid}@media (width<=900px){.workspace{grid-template-columns:minmax(0,1fr)}.workspace__side{position:static}}.panel{background:var(--paper-card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}.panel__head{align-items:center;gap:var(--gap-3);padding:var(--gap-3) var(--gap-4);border-bottom:1px solid var(--rule);background:var(--paper-sunk);display:flex}.panel__title{letter-spacing:-.01em;font-size:.92rem;font-weight:700}.panel__note{color:var(--ink-faint);margin-left:auto;font-size:.78rem}.panel__body{padding:var(--gap-4)}.pegplan{gap:var(--gap-4);display:grid}.pegplan__frame{padding:var(--gap-3);background:var(--paper-sunk);border:1px solid var(--rule);border-radius:var(--radius-sm);justify-self:center;gap:6px;display:grid}.pegplan__row{gap:4px;display:grid}.pegplan__cell{aspect-ratio:1;border:1px solid var(--rule-strong);background:var(--paper-card);cursor:pointer;min-width:30px;min-height:30px;transition:transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);border-radius:5px;place-items:center;display:grid}.pegplan__cell:after{content:"";background:var(--warp);opacity:0;width:42%;height:42%;transition:opacity var(--duration) var(--ease-out);border-radius:2px}.pegplan__cell[aria-pressed=true]{background:var(--warp-soft);border-color:var(--warp)}.pegplan__cell[aria-pressed=true]:after{opacity:1}.pegplan__cell:hover{transform:translateY(-1px);box-shadow:0 4px 10px -6px #16202e73}.pegplan__cell[data-highlight=true]{border-color:var(--warn);box-shadow:inset 0 0 0 2px var(--warn)}.pegplan__legend{gap:var(--gap-3);color:var(--ink-soft);flex-wrap:wrap;font-size:.78rem;display:flex}.key{align-items:center;gap:6px;display:inline-flex}.key__box{border:1px solid var(--rule-strong);background:var(--paper-card);border-radius:3px;place-items:center;width:14px;height:14px;display:grid}.key__box:after{content:"";background:var(--warp);border-radius:2px;width:6px;height:6px}.key__box[data-state=off]{background:var(--paper-card)}.key__box[data-state=off]:after{background:var(--ink-faint);opacity:.35}.controls{gap:var(--gap-2);flex-wrap:wrap;display:flex}.button{border-radius:var(--radius-sm);border:1px solid var(--rule-strong);background:var(--paper-card);min-height:44px;color:var(--ink);cursor:pointer;transition:background var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);align-items:center;gap:8px;padding:0 16px;display:inline-flex}.button:hover{background:var(--paper-sunk)}.button:active{transform:translateY(1px)}.button[aria-pressed=true]{border-color:var(--warp);background:var(--warp-soft);font-weight:600}.button--primary{background:var(--ink);border-color:var(--ink);color:var(--paper-card);font-weight:600}.button--primary:hover{background:#24303f}.button--primary:disabled,.button:disabled{opacity:.45;cursor:not-allowed}.button--quiet{color:var(--ink-soft);background:0 0;border-color:#0000}.button--quiet:hover{background:var(--paper-sunk);color:var(--ink)}.button--pulse{position:relative}.button--pulse:after{content:"";border-radius:calc(var(--radius-sm) + 4px);border:1px solid var(--warn);opacity:.75;animation:gi-pulse 2.6s var(--ease-out) infinite;pointer-events:none;position:absolute;inset:-4px}@keyframes gi-pulse{0%,70%,to{opacity:.75;transform:scale(1)}85%{opacity:.2;transform:scale(1.045)}}@media (prefers-reduced-motion:reduce){.button--pulse:after{opacity:.9;animation:none}}.swatch-group{gap:var(--gap-2);display:grid}.swatch-group__label{color:var(--ink-soft);font-size:.8rem;font-weight:600}.swatches{flex-wrap:wrap;gap:6px;display:flex}.swatch-group input[type=range]{width:100%;min-height:44px;accent-color:var(--warp);cursor:pointer}.swatch{cursor:pointer;width:34px;height:34px;transition:transform var(--duration) var(--ease-out);border:1px solid #16202e8c;border-radius:8px;place-items:center;display:grid}.swatch:hover{transform:translateY(-1px)}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper-card), 0 0 0 4px var(--ink)}.swatch__check{border-bottom:2px solid #fff;border-left:2px solid #fff;width:12px;height:7px;transform:rotate(-45deg)translateY(-1px)}.surface{gap:var(--gap-3);display:grid}.surface__canvas{border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-card);width:100%;height:auto;display:block}.surface__meta{gap:var(--gap-4);color:var(--ink-soft);flex-wrap:wrap;font-size:.8rem;display:flex}.metric{gap:2px;display:grid}.metric__label{color:var(--ink-faint);font-size:.72rem}.metric__value{font-variant-numeric:tabular-nums;font-size:1rem;font-weight:700}.metric__value[data-warn=true]{color:var(--warn)}.tabs{border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-card);display:inline-flex;overflow:hidden}.tabs__tab{cursor:pointer;min-height:40px;color:var(--ink-soft);border:0;border-right:1px solid var(--rule);background:0 0;padding:0 14px}.tabs__tab:last-child{border-right:0}.tabs__tab[aria-selected=true]{background:var(--ink);color:var(--paper-card);font-weight:600}.viewport{gap:var(--gap-3);display:grid}.viewport__frame{aspect-ratio:16/10;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:linear-gradient(#fdfdfb,#f0efe9);width:100%;max-width:100%;position:relative;overflow:hidden}@media (width<=720px){.viewport__frame{aspect-ratio:1}}.viewport__frame canvas,.viewport__canvas{width:100%;height:100%;display:block}.viewport__caption{color:var(--ink-faint);font-size:.78rem}.viewport__tag{background:var(--paper-card);border:1px solid var(--rule-strong);color:var(--ink-soft);border-radius:999px;padding:3px 8px;font-size:.72rem;position:absolute;top:10px;left:10px}.viewport__fallback{padding:var(--gap-4);text-align:center;color:var(--ink-soft);background:var(--paper-card);place-items:center;font-size:.85rem;display:grid;position:absolute;inset:0}.warnings{gap:var(--gap-2);display:grid}.warning{align-items:center;gap:var(--gap-3);text-align:left;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-card);cursor:pointer;width:100%;transition:border-color var(--duration) var(--ease-out);grid-template-columns:auto 1fr auto;padding:10px 12px;display:grid}.warning:hover{border-color:var(--ink-soft)}.warning[data-active=true]{border-color:var(--warn);background:var(--warn-soft)}.warning__badge{color:var(--ink-soft);white-space:nowrap;border:1px solid;border-radius:999px;padding:2px 7px;font-size:.7rem}.warning[data-severity=warn] .warning__badge{color:var(--warn)}.warning__badge[data-tone=ok]{color:var(--ok)}.warning__text{font-size:.85rem}.warning__len{font-variant-numeric:tabular-nums;font-weight:700}.status{align-items:baseline;gap:4px var(--gap-3);padding:var(--gap-3) var(--gap-4);border-radius:var(--radius-sm);border:1px solid var(--rule);flex-wrap:wrap;font-size:.88rem;display:flex}.status[data-tone=ok]{color:#215139;background:#eef5f0;border-color:#bcd3c4}.status[data-tone=warn]{background:var(--warn-soft);color:#7c4a06;border-color:#e2c894}.status[data-tone=info]{background:var(--paper-sunk);color:var(--ink-soft)}.empty{padding:var(--gap-4);border:1px dashed var(--rule-strong);border-radius:var(--radius-sm);color:var(--ink-faint);text-align:center;font-size:.85rem}.start{align-content:center;gap:var(--gap-6);width:min(760px,100%);padding:var(--gap-7) clamp(20px, 5vw, 48px);flex:1;margin:0 auto;display:grid}.start__question{font-size:var(--step-4);letter-spacing:-.03em;text-wrap:balance;font-weight:800;line-height:1.18}.start__lead{font-size:var(--step-1);color:var(--ink-soft);max-width:58ch}.start__predict{gap:var(--gap-3);padding:var(--gap-4);border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper-card);display:grid}.start__predict-title{font-size:.92rem;font-weight:700}.choices{gap:var(--gap-2);display:grid}.choice{gap:var(--gap-3);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-card);cursor:pointer;text-align:left;transition:border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);align-items:flex-start;padding:12px 14px;display:flex}.choice:hover{border-color:var(--ink-soft)}.choice[aria-pressed=true]{border-color:var(--ink);background:var(--paper-sunk)}.choice__mark{border:1px solid var(--rule-strong);border-radius:999px;flex:none;place-items:center;width:18px;height:18px;margin-top:2px;display:grid}.choice[aria-pressed=true] .choice__mark:after{content:"";background:var(--ink);border-radius:999px;width:8px;height:8px}.start__actions{gap:var(--gap-3);flex-wrap:wrap;align-items:center;display:flex}.start__hint{color:var(--ink-faint);font-size:.82rem}.actionbar{z-index:40;align-items:center;gap:var(--gap-3);padding:var(--gap-3) clamp(16px, 4vw, 40px);border-top:1px solid var(--rule);background:color-mix(in srgb, var(--paper-card) 92%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;position:fixed;bottom:0;left:0;right:0}.actionbar__hint{color:var(--ink-faint);text-align:right;margin-left:auto;font-size:.82rem}@media (width<=640px){.actionbar__hint{display:none}}.dialog-backdrop{z-index:60;padding:var(--gap-4);background:#16202e6b;place-items:center;display:grid;position:fixed;inset:0}.dialog{background:var(--paper-card);border:1px solid var(--rule-strong);border-radius:var(--radius);width:min(560px,100%);max-height:80dvh;box-shadow:var(--shadow-pop);overflow:auto}.dialog__head{align-items:center;gap:var(--gap-3);padding:var(--gap-4);border-bottom:1px solid var(--rule);background:var(--paper-card);display:flex;position:sticky;top:0}.dialog__title{font-size:var(--step-1);font-weight:700}.dialog__body{padding:var(--gap-4);gap:var(--gap-4);display:grid}.log-entry{padding-bottom:var(--gap-3);border-bottom:1px solid var(--rule);gap:2px;display:grid}.log-entry:last-child{border-bottom:0;padding-bottom:0}.log-entry__date{color:var(--ink-faint);font-size:.78rem}.log-entry__title{font-weight:600}.log-entry__text{color:var(--ink-soft);font-size:.88rem}.rule-text{color:var(--ink-soft);font-size:.82rem}.rule-text code{background:var(--paper-sunk);border:1px solid var(--rule);border-radius:6px;padding:1px 5px;font-family:inherit}.stack{gap:var(--gap-3);display:grid}.truth-table{border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0 auto}.truth-table td{text-align:center;border:1px solid var(--rule-strong);background:var(--paper-card);width:36px;height:36px;font-weight:700}.truth-table td[data-state=warp]{background:var(--warp-soft);color:var(--warp)}.row{gap:var(--gap-2);flex-wrap:wrap;align-items:center;display:flex}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:80;background:var(--ink);color:var(--paper-card);border-radius:var(--radius-sm);transition:top var(--duration) var(--ease-out);padding:10px 14px;text-decoration:none;position:absolute;top:-60px;left:12px}.skip-link:focus{top:12px}