:root { color-scheme: dark; --cream:#f2e7d4; --muted:rgba(242,231,212,.55); --line:rgba(255,236,210,.16); --glass:rgba(19,12,9,.68); --ember:#e48a47; }
* { box-sizing:border-box }
html,body { width:100%;height:100%;margin:0;overflow:hidden;background:#110b08;color:var(--cream);font-family:"Trebuchet MS",Arial,sans-serif }
button,input { font:inherit;color:inherit }
button { border:0;cursor:pointer }
#hearth { display:block;width:100%;height:100%;outline:none;touch-action:none }
.warmth { position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 73%,rgba(231,102,31,.12),transparent 43%),radial-gradient(ellipse at center,transparent 43%,rgba(4,2,2,.55) 115%);mix-blend-mode:screen }
.chrome { transition:opacity .8s,transform .8s,visibility .8s }
body.idle .chrome { opacity:0;visibility:hidden;pointer-events:none }
.topbar { position:fixed;z-index:3;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;background:linear-gradient(rgba(8,5,4,.48),transparent) }
.brand { display:flex;align-items:baseline;gap:13px }.brand b { font:normal 23px Georgia,serif;letter-spacing:.12em }.brand span { color:var(--muted);font-size:8px;letter-spacing:.26em;text-transform:uppercase }
.actions { display:flex;gap:8px }.round { width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:rgba(20,12,8,.34);font-size:12px;backdrop-filter:blur(8px) }.round:hover { background:rgba(255,230,194,.12) }
.status { position:fixed;z-index:3;top:84px;left:28px;display:flex;align-items:center;gap:11px;text-transform:uppercase }.status>span { width:6px;height:6px;border-radius:50%;background:#ef9a53;box-shadow:0 0 13px #ef7a34 }.status div { display:grid;gap:4px }.status b { font-size:8px;letter-spacing:.19em }.status small { color:var(--muted);font-size:7px;letter-spacing:.13em }
.tool-hint { position:fixed;z-index:3;left:50%;bottom:22px;translate:-50%;padding:11px 17px;border:1px solid rgba(255,235,207,.09);border-radius:40px;background:rgba(14,9,7,.35);color:var(--muted);font-size:8px;letter-spacing:.1em;white-space:nowrap;backdrop-filter:blur(8px) }.tool-hint b { color:var(--cream);font-weight:normal }.tool-hint i { display:inline-block;width:1px;height:10px;margin:0 14px;background:var(--line);vertical-align:middle }
.drawer { position:fixed;z-index:5;top:12px;right:12px;bottom:12px;width:min(390px,calc(100vw - 24px));padding:28px;border:1px solid var(--line);background:linear-gradient(150deg,rgba(35,22,16,.92),rgba(13,9,7,.94));box-shadow:0 20px 80px #0008;backdrop-filter:blur(20px);transform:translateX(calc(100% + 22px));overflow:auto }.drawer.open { transform:none }.drawer-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px }.drawer-head small,legend { color:#c88c5d;font-size:8px;letter-spacing:.25em }.drawer h1 { margin:7px 0 0;font:normal 30px Georgia,serif }
.switch-row { display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer }.switch-row span { display:grid;gap:4px }.switch-row b { font-size:11px;font-weight:normal }.switch-row small { color:var(--muted);font-size:8px }.switch-row input { position:absolute;opacity:0 }.switch-row>i { width:38px;height:21px;padding:3px;border:1px solid var(--line);border-radius:20px }.switch-row>i:after { content:"";display:block;width:13px;height:13px;border-radius:50%;background:#796657;transition:.25s }.switch-row input:checked+i { background:#9f4e26 }.switch-row input:checked+i:after { translate:17px;background:#f3d9bc }
fieldset { margin:28px 0;padding:0;border:0 }legend { margin-bottom:14px }.styles { display:grid;grid-template-columns:repeat(3,1fr);gap:8px }.styles button { padding:7px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:8px;letter-spacing:.06em }.styles button i { display:block;height:53px;margin-bottom:7px;border:1px solid var(--line);background:linear-gradient(135deg,#773a24,#281710) }.styles button:nth-child(2) i { background:linear-gradient(135deg,#c6b9a6,#342f2d) }.styles button:nth-child(3) i { background:linear-gradient(135deg,#7d1f1c,#173b28) }.styles button:nth-child(4) i { background:linear-gradient(135deg,#413743,#100e13) }.styles button:nth-child(5) i { background:linear-gradient(135deg,#bd5a16,#22142b) }.styles button:nth-child(6) i { background:linear-gradient(135deg,#8b7657,#43513a) }.styles button.active { border-color:#a8673e;color:white;background:#ffffff08 }
.range-row { display:flex;justify-content:space-between;margin:25px 0 12px;font-size:9px;letter-spacing:.12em;text-transform:uppercase }.range-row output { color:var(--muted) }input[type=range] { appearance:none;width:100%;height:2px;background:#ffffff26;accent-color:#d17b43 }input[type=range]::-webkit-slider-thumb { appearance:none;width:13px;height:13px;border-radius:50%;background:#efd7bc }
.quality { display:flex;align-items:center;gap:5px;margin-top:27px;font-size:9px;letter-spacing:.1em;text-transform:uppercase }.quality span { margin-right:auto }.quality button { padding:7px 10px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:8px }.quality button.active { background:#ffffff12;color:white }
.welcome { position:fixed;z-index:8;inset:0;display:flex;align-items:center;padding-left:12vw;background:linear-gradient(90deg,rgba(8,5,4,.85),rgba(8,5,4,.2) 58%,rgba(8,5,4,.1));transition:opacity 1.4s,visibility 1.4s }.welcome.hidden { opacity:0;visibility:hidden;pointer-events:none }.welcome-copy p { color:#d2905f;font-size:8px;letter-spacing:.35em }.welcome-copy h1 { margin:18px 0 37px;font:normal clamp(54px,7vw,103px)/.93 Georgia,serif;letter-spacing:-.03em;text-shadow:0 14px 60px #000 }.welcome-copy button,.error button { min-width:210px;padding:14px 19px;border:1px solid rgba(255,229,198,.45);background:#f1dfc6;color:#28160e;font-size:9px;letter-spacing:.2em;text-transform:uppercase }.welcome-copy button span { float:right }.welcome-copy small { display:block;margin-top:14px;color:#ffffff55;font-size:7px;letter-spacing:.12em }
.loading,.error { position:fixed;z-index:20;inset:0;display:grid;place-content:center;justify-items:center;gap:15px;background:#110b08 }.loading i { width:27px;height:27px;border:1px solid transparent;border-top-color:#d88b52;border-radius:50%;animation:spin 1.3s linear infinite }.loading span { color:var(--muted);font-size:8px;letter-spacing:.24em;text-transform:uppercase }.loading.hidden,.error.hidden { opacity:0;visibility:hidden;pointer-events:none;transition:.7s }.error { padding:30px;text-align:center }.error h1 { font:normal 38px Georgia,serif }.error p { color:var(--muted) }@keyframes spin { to { transform:rotate(360deg) } }
@media(max-width:650px){.topbar{padding:18px}.brand span,.status{display:none}.drawer{padding:22px}.welcome{padding:0 28px;align-items:flex-end;padding-bottom:18vh}.tool-hint{bottom:13px;max-width:calc(100vw - 24px);overflow:hidden}.styles button i{height:45px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}.warmth{display:none}}