:root{--paper: #f7e1df;--glow: #fff8ef;--blush: #f2c6ca;--dot: rgba(255, 252, 246, .6);--ink: #4a1d24;--ink-soft: #8c5a5f;--card: #fffaf6;--line: #eed3d2;--caramel: #c41d2a;--latin: "Newsreader", "Times New Roman", serif;--body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;color-scheme:light}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background-color:var(--paper);background-image:radial-gradient(circle,var(--dot) 0 2.4px,transparent 3px),radial-gradient(ellipse 85% 75% at 50% 42%,var(--glow) 0%,var(--paper) 55%,var(--blush) 100%);background-size:30px 30px,100% 100%;color:var(--ink);font-family:var(--body);overflow:hidden}#app{position:relative;height:100%}#stage{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;outline:none}#stage.grab{cursor:grab}#stage.grabbing{cursor:grabbing}.loader{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);transition:opacity .5s ease;pointer-events:none}.loader.done{opacity:0}.loader-dot{width:18px;height:18px;border-radius:50%;background:var(--caramel);animation:squish 1.1s ease-in-out infinite}@keyframes squish{0%,to{transform:scale(1)}50%{transform:scale(1.35,.7)}}.head{position:absolute;top:20px;left:16px;right:16px;max-width:30rem;pointer-events:none;display:grid;gap:8px}.head h1{margin:0;font-family:var(--latin);font-style:italic;font-weight:400;font-size:clamp(2.4rem,6vw,4rem);line-height:1;letter-spacing:-.01em}.head em{font-family:var(--latin);font-style:italic;font-size:1.15rem;color:var(--ink-soft)}.head p{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink-soft);max-width:22rem}.hint{position:absolute;left:16px;bottom:18px;max-width:20rem;padding:8px 10px;margin:0 0 0 -10px;border-radius:6px;background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:.78rem;line-height:1.55;color:var(--ink-soft);pointer-events:none}.hint b{color:var(--ink);font-weight:500}.credit{position:absolute;left:50%;bottom:12px;transform:translate(-50%);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink-soft);opacity:.7;pointer-events:none;white-space:nowrap}.badge{position:absolute;top:22px;right:18px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:6px;color:var(--ink-soft)}.badge i{width:7px;height:7px;border-radius:50%;background:#3f9b5a}.panel{position:absolute;top:56px;right:16px;width:248px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px -18px #3c280a73;font-size:.8rem}.panel section{padding:12px 14px;display:grid;gap:10px}.panel section+section{border-top:1px solid var(--line)}.row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.label{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.val{font-family:var(--mono);font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--ink)}.flavours{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.flavours button{display:grid;justify-items:center;gap:5px;padding:8px 4px 6px;font:inherit;font-size:.72rem;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:4px;cursor:pointer}.flavours button span{width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:inset 0 -2px 3px #0000002e}.flavours button[aria-pressed=true]{border-color:var(--ink);background:#fff}.slider{display:grid;gap:4px}input[type=range]{width:100%;accent-color:var(--caramel);margin:0}.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}.btns button{font:inherit;font-size:.74rem;padding:7px 6px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:4px;cursor:pointer}.btns button.wide{grid-column:span 2;background:var(--ink);color:var(--card);border-color:var(--ink)}.btns button:hover{border-color:var(--ink-soft)}.checks{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem}.checks label{display:flex;align-items:center;gap:5px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--caramel);outline-offset:2px}.meter{height:4px;background:var(--line);border-radius:2px;overflow:hidden}.meter i{display:block;height:100%;width:100%;background:var(--caramel);transform-origin:left;transform:scaleX(0)}.toggle{display:none}@media (max-width: 640px){.head{top:14px}.head p,.badge,.hint,.credit{display:none}.panel{top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:16px;right:16px;width:auto}.toggle{display:flex;width:100%;justify-content:space-between;align-items:center;font:inherit;font-size:.78rem;background:transparent;border:0;padding:10px 14px;color:var(--ink);cursor:pointer}.panel.collapsed section{display:none}.panel:not(.collapsed) .toggle{border-bottom:1px solid var(--line)}}.embed .head,.embed .badge,.embed .panel,.embed .credit{display:none}.embed .hint{left:50%;transform:translate(-50%);margin:0;text-align:center}