:root{--paper:#f3efe7;--ink:#141414;--accent:#c2461c;--navy:#0d2240;--studio:#1c1b1a;--muted:#8a8478;--serif:"Instrument Serif", serif;--sans:"Inter Tight", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}.eyebrow{font:500 11px var(--mono);letter-spacing:.18em;color:var(--muted);text-transform:uppercase}.serif{font-family:var(--serif);font-weight:400;line-height:.95}.serif i{color:var(--accent)}button{font:inherit;color:inherit;cursor:pointer}.page{min-height:100%;padding:max(20px, env(safe-area-inset-top)) 18px 120px;max-width:980px;margin:0 auto}h1.display{font-family:var(--serif);letter-spacing:-.01em;margin:6px 0 18px;font-size:clamp(40px,7vw,64px);font-weight:400;line-height:.95}h1.display i{color:var(--accent)}h2.section{font:500 11px var(--mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;justify-content:space-between;margin:26px 0 10px;display:flex}.cta{left:50%;bottom:max(16px, env(safe-area-inset-bottom));background:var(--accent);color:#fff;width:min(560px,100% - 32px);height:54px;font:600 16px var(--sans);z-index:20;border:0;border-radius:27px;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #c2461c59}.cta:disabled{opacity:.45;box-shadow:none}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{background:0 0;border:1px solid #cfc8ba;border-radius:20px;padding:6px 12px;font-size:12px}.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;display:grid}.swatch .tile{background-size:64px;border-radius:12px;height:72px;box-shadow:inset 0 0 0 1px #00000014,inset -10px -14px 24px #0000001f,inset 8px 10px 20px #ffffff1f}.swatch .n{margin-top:6px;font-size:12px;font-weight:600;line-height:1.15}.swatch .m{font:400 10px var(--mono);color:var(--muted)}.card{background:#fbf9f4;border:1px solid #e3dccd;border-radius:16px}.seg{background:#e6e0d4;border-radius:12px;padding:3px;display:flex}.seg button{color:var(--muted);background:0 0;border:0;border-radius:9px;flex:1;padding:9px 6px;font-size:13px;font-weight:600}.seg button.on{background:var(--ink);color:var(--paper)}.tabs{border-bottom:1px solid #ddd6c8;gap:18px;margin-bottom:14px;display:flex}.tabs button{color:var(--muted);background:0 0;border:0;padding:0 0 8px;font-size:14px}.tabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);font-weight:600}.workspace{color:var(--paper);touch-action:none;position:fixed;inset:0;overflow:hidden}.workspace.blueprint{background-color:var(--navy);background-image:linear-gradient(#96c8ff1f 1px,#0000 1px),linear-gradient(90deg,#96c8ff1f 1px,#0000 1px),linear-gradient(#96c8ff0d 1px,#0000 1px),linear-gradient(90deg,#96c8ff0d 1px,#0000 1px);background-size:50px 50px,50px 50px,10px 10px,10px 10px}.workspace.studio{background:radial-gradient(120% 70% at 50% 35%,#3a3936 0%,#1c1b1a 60%,#121211 100%)}.stagebar{top:max(10px, env(safe-area-inset-top));z-index:10;justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;left:10px;right:10px}.stagebar .pills{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#00000040;border-radius:16px;gap:2px;padding:3px;display:flex}.stagebar .pills button{color:#a9b8c9;background:0 0;border:0;border-radius:13px;padding:6px 11px;font-size:12px}.workspace.studio .stagebar .pills button{color:#9c978d}.stagebar .pills button.on{background:var(--paper);color:var(--ink);font-weight:600}.stagebar .nav{height:32px;color:var(--paper);white-space:nowrap;background:#f3efe724;border:0;border-radius:16px;padding:0 12px;font-size:12px;font-weight:600}.stagebar .nav.next{background:var(--accent)}.dock{left:50%;bottom:max(14px, env(safe-area-inset-bottom));z-index:10;background:#141414;border:1px solid #2a2927;border-radius:26px;justify-content:space-around;align-items:center;width:min(420px,100% - 24px);height:52px;display:flex;position:absolute;transform:translate(-50%)}.dock button{width:40px;height:40px;color:var(--paper);background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;display:flex}.dock button.on{background:var(--accent)}.dock button:disabled{opacity:.3}.pop{background:var(--paper);color:var(--ink);z-index:30;border-radius:14px;width:220px;font-size:13px;position:absolute;overflow:hidden;box-shadow:0 14px 34px #00000080}.pop .h{background:var(--ink);color:var(--paper);font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px}.pop button{text-align:left;background:0 0;border:0;border-bottom:1px solid #e3dccd;align-items:center;gap:8px;width:100%;padding:11px 12px;font-size:13px;display:flex}.pop button:last-child{border-bottom:0}.pop .note{font:500 11px var(--mono);padding:9px 12px}.ok{color:#2f7d4f}.warn{color:var(--accent)}.tray{left:50%;bottom:calc(max(14px, env(safe-area-inset-bottom)) + 62px);width:min(560px,100% - 24px);color:var(--ink);z-index:10;background:#f3efe7f7;border-radius:18px;padding:10px;position:absolute;transform:translate(-50%)}.tray .t{font:500 10px var(--mono);letter-spacing:.12em;color:var(--muted);text-transform:uppercase;justify-content:space-between;margin-bottom:8px;display:flex}.tray .r{touch-action:pan-x;gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.tray .tile{touch-action:pan-x;background-size:48px;border:0;border-radius:10px;flex:0 0 48px;height:48px;box-shadow:inset 0 0 0 1px #0000001a}.tray .tile.on{outline:2px solid var(--accent);outline-offset:2px}.hint{left:50%;top:calc(max(10px, env(safe-area-inset-top)) + 46px);font:500 11px var(--mono);color:#bcd6f2;z-index:9;text-align:center;background:#00000059;border-radius:12px;width:max-content;max-width:calc(100% - 24px);padding:6px 12px;position:absolute;transform:translate(-50%)}.undo{z-index:12;flex-direction:column;gap:6px;display:flex;position:absolute;top:38%;right:10px}.undo button{width:38px;height:38px;color:var(--paper);background:#141414d1;border:1px solid #ffffff2e;border-radius:50%;font-size:18px;line-height:1}.undo button:disabled{opacity:.3}