:root { --ink:#171a16; --paper:#f2f0e8; --lime:#d7ff45; --muted:#777b70; --line:#d6d5cd; --orange:#ff6641; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,system-ui,sans-serif; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }
.topbar { height:76px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 4vw; }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; font:700 14px/1 DM Mono,monospace; letter-spacing:.12em; }
.brand-mark { display:flex; gap:2px; align-items:center; height:24px; }
.brand-mark i { display:block; width:6px; background:var(--ink); border-radius:5px; transform:skewY(-28deg); }
.brand-mark i:nth-child(1){height:12px}.brand-mark i:nth-child(2){height:22px}.brand-mark i:nth-child(3){height:16px}
.top-actions { display:flex; align-items:center; gap:25px; }
.text-btn { border:0; background:transparent; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.export-btn { border:0; background:var(--ink); color:white; padding:13px 17px; display:flex; gap:24px; align-items:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.export-btn b { color:var(--lime); font-size:18px; }
main { padding:0 4vw 90px; }
.hero { padding:75px 0 70px; display:grid; grid-template-columns:1.05fr .95fr; align-items:end; }
.eyebrow { grid-column:1/-1; margin:0 0 22px; font:500 11px DM Mono,monospace; letter-spacing:.12em; }
.eyebrow span { display:inline-block; width:7px; height:7px; background:var(--orange); border-radius:50%; margin-right:8px; }
.hero h1 { font-size:clamp(62px,8vw,124px); letter-spacing:-.075em; line-height:.76; font-weight:500; margin:0; }
.hero h1 em { font-family:Georgia,serif; font-weight:400; color:var(--orange); }
.intro { max-width:430px; justify-self:end; font-size:18px; line-height:1.55; margin:0 0 4px; color:#4c514a; }
.studio { border-top:1px solid var(--ink); display:grid; grid-template-columns:minmax(300px,370px) 1fr; min-height:800px; }
.sidebar { border-right:1px solid var(--line); padding:35px 34px 0 0; }
.step-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.step-head>span { width:30px;height:30px;border-radius:50%;background:var(--lime);display:grid;place-items:center;font:500 10px DM Mono; }
.step-head p,.preview-top p { font:500 10px DM Mono; letter-spacing:.15em; margin:1px 0 5px; color:var(--muted); }
.step-head h2,.preview-top h2 { margin:0;font-size:20px;letter-spacing:-.03em; }
.preset-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.preset { border:1px solid var(--line); background:transparent; padding:6px; transition:.2s; }
.preset:hover,.preset.active { border-color:var(--ink); background:#fff; box-shadow:inset 0 -2px var(--lime); }
.preset-art { height:54px; display:grid; place-items:center; background:#e4e3dc; font:700 18px DM Mono; overflow:hidden; }
.preset b { display:block; font-size:10px; margin:7px 0 3px; text-align:left; }
.type-composer { margin-top:10px;background:var(--ink);padding:12px; }.type-composer label { color:#a9ada2;font:500 8px DM Mono;letter-spacing:.12em;display:block;margin-bottom:7px; }.type-composer div { display:flex; }.type-composer input { min-width:0;flex:1;border:0;background:white;padding:9px 10px;font:600 12px DM Mono;text-transform:uppercase; }.type-composer button { border:0;background:var(--lime);font-size:9px;font-weight:700;padding:0 12px; }
.preset-art.orb { background:radial-gradient(circle at 40% 35%,#fff 0,#aaa 22%,#222 60%,#ddd 62%); }
.preset-art.heart { font-size:31px; color:#444; text-shadow:5px 5px 0 #bbb; }
.preset-art.waves { background:repeating-radial-gradient(ellipse at 50% 80%,#222 0 3px,#ddd 4px 11px); }
.control-section { margin-top:27px; }
.section-label { display:flex; justify-content:space-between; margin-bottom:10px; font:500 9px DM Mono; letter-spacing:.12em; }
.section-label div { display:flex; gap:7px; }.section-label button { border:0;background:transparent;text-decoration:underline;font-size:9px;color:var(--muted);padding:0; }
.depth-wrap { position:relative; border:1px solid var(--line); background:#111; line-height:0; }
#depthCanvas { width:100%; height:auto; cursor:crosshair; touch-action:none; }
.canvas-hint { position:absolute; right:8px; bottom:10px; color:#fff8; font:400 8px DM Mono; letter-spacing:.12em; pointer-events:none; }
.brush-tools { display:flex; align-items:center; gap:5px; margin-top:8px; }
.tool { border:1px solid var(--line); background:transparent; padding:7px 9px; font-size:10px; }
.tool.active { background:var(--ink); color:white; }
.tool span { margin-left:4px; }
.brush-tools label { display:flex;align-items:center;gap:7px;margin-left:auto;font:500 8px DM Mono;color:var(--muted); }
.brush-detail { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px; }.brush-detail label,.density-label { display:flex;align-items:center;gap:8px;font:500 8px DM Mono;color:var(--muted); }.brush-detail input,.density-label input { min-width:0;width:100%; }
input[type=range] { accent-color:var(--ink); }
.wide-range { width:100%; }
select { width:100%; border:1px solid var(--line); border-radius:0; background:transparent; padding:10px; font-size:10px; color:var(--ink); }
.second { margin-top:40px; }
.patterns { display:grid; gap:7px; }
.pattern { display:grid;grid-template-columns:43px 1fr 20px;align-items:center;gap:11px;border:1px solid var(--line);background:transparent;padding:8px;text-align:left; }
.pattern.active { border-color:var(--ink); background:white; }
.pattern i { width:43px;height:38px;display:block; }
.pattern span b,.pattern span small { display:block; }
.pattern span b { font-size:11px; }.pattern span small { font-size:9px;color:var(--muted);margin-top:2px; }
.pattern u { text-decoration:none;opacity:0; }.pattern.active u { opacity:1; }
.swatch.confetti { background-color:#f7c842;background-image:radial-gradient(circle,#f35 15%,transparent 16%),radial-gradient(circle,#185c47 14%,transparent 15%);background-size:15px 14px;background-position:2px 1px,9px 8px; }
.swatch.botanical { background-color:#d9e3bb;background-image:radial-gradient(ellipse,#3e694c 20%,transparent 22%);background-size:13px 19px; }
.swatch.mono { background:repeating-radial-gradient(circle at 10% 20%,#111 0 1px,#ddd 2px 4px); }
.swatch.custom { display:grid!important;place-items:center;background:#deddd5;font-size:20px;font-style:normal; }
.surface-controls { margin-top:22px; }.palette-row { display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px; }.palette { display:flex;border:1px solid transparent;background:transparent;padding:3px; }.palette.active { border-color:var(--ink); }.palette i { display:block;flex:1;height:22px; }.palette[data-palette=sunshine] i:nth-child(1){background:#f7c136}.palette[data-palette=sunshine] i:nth-child(2){background:#f56746}.palette[data-palette=sunshine] i:nth-child(3){background:#1f5e48}.palette[data-palette=lagoon] i:nth-child(1){background:#baf2e9}.palette[data-palette=lagoon] i:nth-child(2){background:#16a6a1}.palette[data-palette=lagoon] i:nth-child(3){background:#05445e}.palette[data-palette=ultraviolet] i:nth-child(1){background:#fbcaef}.palette[data-palette=ultraviolet] i:nth-child(2){background:#a65de2}.palette[data-palette=ultraviolet] i:nth-child(3){background:#332075}.palette[data-palette=noir] i:nth-child(1){background:#eee}.palette[data-palette=noir] i:nth-child(2){background:#888}.palette[data-palette=noir] i:nth-child(3){background:#151515}
.generate-mobile { display:none; }
.preview-panel { padding:36px 0 0 42px; min-width:0; }
.preview-top { display:flex; align-items:end; justify-content:space-between; margin-bottom:20px; }
.preview-top button { border:1px solid var(--line);background:transparent;padding:10px 13px;font:600 10px Manrope;text-transform:uppercase;letter-spacing:.04em; }
.preview-top button span { margin-right:6px; }
.preview-actions { display:flex;gap:7px;align-items:center; }.view-switch { display:flex;border:1px solid var(--line);padding:3px; }.view-switch button { border:0;padding:7px 9px;font:500 8px DM Mono;color:var(--muted); }.view-switch button.active { background:var(--ink);color:var(--lime); }
.canvas-shell { position:relative; background:#ddd; line-height:0; overflow:hidden; }
#stereoCanvas { width:100%; height:auto; image-rendering:auto; }
.focus-dots { position:absolute;left:50%;top:4.5%;transform:translateX(-50%);display:flex;gap:70px; }
.focus-dots i { width:8px;height:8px;border-radius:50%;background:#111;box-shadow:0 0 0 1px #fff8; }
.loading { position:absolute;inset:0;display:none;place-items:center;background:#171a16dd;color:var(--lime);font:500 11px DM Mono;letter-spacing:.16em; }
.depth-badge { display:none;position:absolute;left:14px;bottom:14px;background:var(--lime);padding:7px 9px;font:500 8px DM Mono;letter-spacing:.1em; }.canvas-shell.depth-mode .depth-badge { display:block; }.canvas-shell.depth-mode .focus-dots { display:none; }
.canvas-shell:fullscreen { display:grid;place-items:center;background:#0b0c0a;padding:3vw; }.canvas-shell:fullscreen canvas { max-height:94vh;max-width:94vw;width:auto;height:auto; }
.view-guide { border:1px solid var(--line);border-top:0;display:flex;align-items:center;gap:17px;padding:16px 20px; }
.view-guide .eye { font-size:25px; }.view-guide p { margin:0;font-size:11px;line-height:1.5;color:var(--muted); }.view-guide b { color:var(--ink);font:500 9px DM Mono;letter-spacing:.12em; }.view-guide em { color:var(--ink); }
.meta-row { display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font:400 8px DM Mono;letter-spacing:.1em; }
footer { min-height:120px;background:var(--ink);color:white;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;font:400 10px DM Mono;letter-spacing:.1em; }
footer p { color:#9ea096; } footer a { color:var(--lime);text-decoration:none; }
dialog { width:min(520px,calc(100% - 36px)); border:0; padding:40px; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px #0007; }
dialog::backdrop { background:#111b; backdrop-filter:blur(5px); }
dialog h2 { font:500 42px/1.05 Manrope;margin:0 0 25px;letter-spacing:-.05em; }
dialog ol { padding-left:22px;line-height:1.8;color:#51564e; } dialog li { padding-left:8px; }
.dialog-close { position:absolute;right:18px;top:14px;border:0;background:none;font-size:28px; }
.dialog-tip { background:var(--lime);padding:13px;font-size:12px;line-height:1.5;margin:25px 0 0; }
.toast { position:fixed; z-index:20; left:50%; bottom:25px; transform:translate(-50%,20px); background:var(--ink);color:white;padding:11px 16px;font:500 10px DM Mono;letter-spacing:.06em;opacity:0;pointer-events:none;transition:.25s; }
.toast.show { opacity:1;transform:translate(-50%,0); }
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:45px}.intro{justify-self:start}.studio{grid-template-columns:1fr}.sidebar{border-right:0;padding-right:0}.preview-panel{padding-left:0;margin-top:55px}.generate-mobile{display:flex;width:100%;justify-content:space-between;margin-top:18px;padding:14px;background:var(--lime);border:1px solid var(--ink);font-weight:700}.preset-art{height:70px}}
@media(max-width:540px){.topbar{padding:0 20px}.text-btn{display:none}main{padding-left:20px;padding-right:20px}.hero{padding:55px 0}.hero h1{font-size:65px}.intro{font-size:15px}.preset-grid{grid-template-columns:repeat(2,1fr)}.preview-top{align-items:flex-start}.preview-actions{flex-wrap:wrap;justify-content:flex-end}.preview-actions>#regenerate{font-size:0}.preview-actions>#regenerate span{font-size:18px;margin:0}.view-switch button{font-size:7px!important}.focus-dots{gap:45px}footer{padding:30px 20px;gap:20px;flex-wrap:wrap}}