:root {color-scheme:dark; font-family:Inter,system-ui,-apple-system,sans-serif; color:#f2f1ed; background:#121312; --accent:#c2ff00; --line:#333630; --muted:#aaa99e}
* {box-sizing:border-box}
body {margin:0; min-width:320px}
button,input,textarea {font:inherit}
button, .upload {border:1px solid var(--line); border-radius:9px; color:inherit; background:#22241f; padding:.62rem .8rem; cursor:pointer}
button:disabled {opacity:.38; cursor:default}
button:not(:disabled):hover,.upload:hover {border-color:#89936d}
button:focus-visible,input:focus-visible,textarea:focus-visible,.upload:focus-within {outline:2px solid var(--accent); outline-offset:2px}
.bar {display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem max(5vw,16px); border-bottom:1px solid var(--line); background:#171915}
.brand {display:flex; align-items:center; gap:.42rem; color:inherit; text-decoration:none; font-weight:800; letter-spacing:.035em; font-size:.83rem}
.brand span:not(.mark),#saved {color:var(--muted)}
.mark {color:var(--accent);font-size:1.2rem}
#saved {font-size:.78rem; text-align:right}
main {max-width:1160px; margin:auto; padding:1.8rem 1.3rem max(2rem,env(safe-area-inset-bottom))}
.intro {display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem}
.eyebrow {color:var(--accent); letter-spacing:.14em; font-size:.72rem; margin:0 0 .4rem; font-weight:750}
h1 {font-size:clamp(2.1rem,5vw,3.6rem); line-height:1; margin:0; letter-spacing:-.06em}
.primary {background:var(--accent); color:#141713; font-weight:800; border:0; padding:.85rem 1.1rem}
.primary span {margin-left:.4rem}
.workspace {display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:1.15rem; align-items:start}
.editor {display:grid; gap:.75rem}
.panel,.preview {background:#1a1c18; border:1px solid var(--line); border-radius:14px; padding:1rem}
.preview {position:sticky; top:1rem}
h2 {font-size:1rem; margin:0 0 .85rem}
h2 small,.preview-title span {font-weight:500; font-size:.72rem; color:var(--muted); margin-left:.35rem}
.row {display:flex; flex-wrap:wrap; align-items:end; gap:.65rem}
.row label {flex:1; min-width:8rem}
label {display:block; font-size:.82rem; color:#d9d9cf; margin-bottom:.7rem}
label:last-child {margin-bottom:0}
.row label {margin-bottom:0}
input:not([type=file]), textarea {display:block; width:100%; color:inherit; background:#121410; border:1px solid var(--line); border-radius:8px; padding:.65rem .7rem; margin-top:.35rem; resize:vertical}
.slides {display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem}
.slides button[aria-current=true] {background:var(--accent); border-color:var(--accent); color:#151714}
.actions {margin-bottom:.7rem}
.actions:last-child {margin-bottom:0}
.upload {display:inline-flex; align-items:center; position:relative; flex:0 1 auto!important; margin:0; min-width:auto!important}
.upload input {position:absolute; opacity:0; inset:0; width:100%; height:100%; cursor:pointer}
.preview-title {display:flex; justify-content:space-between; align-items:baseline}
.message {background:#232620; border-radius:9px; overflow:hidden; max-width:520px; margin:auto}
canvas {display:block; width:100%; height:auto; background:#080907}
.pagination {display:flex; align-items:center; justify-content:center; gap:.7rem; padding:.28rem; font-size:.78rem}
.pagination button {border:0; padding:.17rem .55rem; font-size:1.15rem}
#textPreview {padding:.8rem; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:.88rem; line-height:1.5}
.status {background:#242919; border:1px solid #626e3f; border-radius:8px; padding:.7rem .9rem; margin:.65rem 0}
.status[data-error=true] {border-color:#a45d49}
.visually-hidden {position:absolute; clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}
@media(max-width:700px) {
  main {padding:1.2rem .8rem max(2rem,env(safe-area-inset-bottom))}
  .workspace {display:flex; flex-direction:column; gap:.8rem}
  .editor,.preview {width:100%}
  .preview {position:static}
  .panel,.preview {padding:.8rem}
  .primary {padding:.65rem .75rem;font-size:.85rem}
  input:not([type=file]),textarea {font-size:16px}
}