:root{--paper:#f2efe7;--card:#f8f6ef;--ink:#231e16;--muted:#857d6e;--rule:#ddd6c8;--accent:#f4b829;--accent-ink:#231e16;--shadow:#231e16e6;--grain:.16;--font:"Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--paper:#1c1914;--card:#25211a;--ink:#efe8d8;--muted:#a39a89;--rule:#3b362c;--accent:#f4b829;--accent-ink:#231e16;--shadow:#000000b3;--grain:.1;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0}body{background-color:var(--paper);color:var(--ink);font:15px/1.6 var(--font);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .39  0 0 0 0 .33  .16 0 0 0 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");max-width:1280px;margin:0 auto;padding:28px 20px 56px;transition:background-color .25s,color .25s}:root[data-theme=dark] body{background-blend-mode:soft-light}a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}a:hover{color:var(--muted)}h1,h2{letter-spacing:-.01em;margin:0;line-height:1.25}h1{font-size:clamp(22px,3.2vw,34px);font-weight:800}h2{margin-bottom:14px;font-size:18px;font-weight:800}h2 span{color:var(--muted);font-weight:600}b{font-weight:800}em{background:color-mix(in srgb, var(--accent) 35%, transparent);border-radius:3px;padding:0 3px;font-style:normal;font-weight:700}.top{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.intro{max-width:760px;color:var(--muted);margin:10px 0 12px}.links{flex-wrap:wrap;gap:8px;display:flex}.links a{font:700 12px/1 var(--mono);letter-spacing:.04em;border:1.5px solid var(--ink);background:var(--card);box-shadow:2px 2px 0 var(--shadow);border-radius:999px;padding:7px 12px;text-decoration:none;transition:transform .1s,box-shadow .1s}.links a:hover{box-shadow:3px 3px 0 var(--shadow);color:var(--ink);background:var(--accent);transform:translate(-1px,-1px)}button{font:inherit;color:var(--ink);cursor:pointer}.pill{white-space:nowrap;font:700 13px/1 var(--font);background:var(--card);border:1.5px solid var(--ink);border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:inline-flex}.pill:hover{background:color-mix(in srgb, var(--card) 85%, var(--ink))}.pill[aria-pressed=true]{background:var(--ink);color:var(--paper)}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}kbd{font:700 11px var(--mono);border:1.2px solid;border-radius:4px;padding:1px 5px}.theme-ico{background:linear-gradient(90deg,currentColor 50%,#0000 50%);border:2px solid;border-radius:50%;width:14px;height:14px}.tabs{border-bottom:1.5px solid var(--rule);flex-wrap:wrap;gap:8px;margin:22px 0 14px;padding-bottom:14px;display:flex}.tab{border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);background:0 0;border-radius:12px;padding:9px 20px;font-size:16px;font-weight:800;transition:transform .1s,box-shadow .1s,background .15s}.tab:hover{background:color-mix(in srgb, var(--accent) 40%, transparent)}.tab[aria-selected=true]{background:var(--accent);color:var(--accent-ink);box-shadow:1px 1px 0 var(--shadow);transform:translate(2px,2px)}.toolbar{flex-wrap:wrap;align-items:center;gap:12px 28px;margin-bottom:16px;display:flex}.group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.group-label{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.seg{border:1.5px solid var(--ink);background:var(--card);border-radius:999px;display:inline-flex;overflow:hidden}.seg button{font:700 13px/1 var(--font);border:0;border-right:1.5px solid var(--ink);background:0 0;padding:8px 14px}.seg button:last-child{border-right:0}.seg button:hover{background:color-mix(in srgb, var(--card) 80%, var(--ink))}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.stage{--ph:clamp(520px, 76vh, 780px);--split:50%;position:relative}.stage.mode-side{grid-template-columns:1fr 1fr;gap:18px;display:grid}.stage.mode-slider,.stage.mode-toggle{height:var(--ph)}.panel{height:var(--ph);border:1.5px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 var(--shadow);border-radius:14px;position:relative;overflow:hidden}.stage.mode-slider .panel,.stage.mode-toggle .panel{height:auto;position:absolute;inset:0}.stage.mode-slider .panel-b{clip-path:inset(0 0 0 var(--split));box-shadow:none;border-radius:0 14px 14px 0}.panel.off{visibility:hidden;pointer-events:none}.panel iframe{background:var(--card);border:0;width:100%;height:100%;display:block}.stage.dragging iframe{pointer-events:none}.badge{z-index:4;pointer-events:none;font:800 11px/1 var(--mono);letter-spacing:.12em;border:1.5px solid var(--ink);color:#231e16;background:#f2efe7;border-radius:999px;padding:6px 10px;position:absolute;top:10px}.badge-a{left:10px}.badge-b{background:var(--accent);right:10px}.divider{z-index:6;pointer-events:none;position:absolute;inset:0}.divider[hidden]{display:none}.divider-line{top:0;bottom:0;left:var(--split);background:var(--ink);width:3px;box-shadow:0 0 0 1.5px var(--paper);margin-left:-1.5px;position:absolute}.grip{left:var(--split);pointer-events:auto;touch-action:none;border:2px solid var(--ink);background:var(--accent);width:46px;height:46px;color:var(--accent-ink);font:800 18px/1 var(--font);box-shadow:0 3px 0 var(--shadow);cursor:ew-resize;border-radius:50%;padding:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.stage.dragging .grip{box-shadow:0 1px 0 var(--shadow);transform:translate(-50%,-48%)}.stage-hint{color:var(--muted);margin:14px 2px 0;font-size:13px}section{margin-top:44px}.notes ul{gap:12px;margin:0;padding:0;list-style:none;display:grid}.notes li{background:var(--card);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--shadow);border-radius:12px;max-width:980px;padding:14px 18px}.table-scroll{border:1.5px solid var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--shadow);border-radius:12px;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);padding:12px 16px}thead th{font:800 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb, var(--card) 80%, var(--ink))}tbody th{white-space:nowrap;width:1%;font-weight:800}tbody tr:last-child>*{border-bottom:0}.fine{color:var(--muted);max-width:980px;margin:10px 2px 0;font-size:12.5px}.chain{flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding:0;list-style:none;display:flex}.chain li:not(.arrow){border:1.5px solid var(--ink);background:var(--card);box-shadow:3px 3px 0 var(--shadow);border-radius:12px;flex-direction:column;padding:8px 16px;display:flex}.chain li:last-child{background:var(--accent);color:var(--accent-ink)}.chain span{font:600 11px var(--mono);letter-spacing:.06em;opacity:.75}.chain .arrow{font-size:22px;font-weight:800}.lineage p{max-width:900px;margin:0}.credits{border-top:1.5px solid var(--rule);color:var(--muted);margin-top:48px;padding-top:18px;font-size:13px}.credits p{margin:4px 0}@media (width<=800px){body{padding:18px 12px 40px}.top{flex-direction:column-reverse;align-items:stretch}#theme{align-self:flex-end}.stage{--ph:560px}.stage.mode-side{grid-template-columns:1fr}.tab{padding:8px 14px;font-size:14px}}