:root{
  --bg:#111214;
  --panel:#191b1f;
  --panel-2:#212429;
  --line:#2c3037;
  --fg:#e9eaec;
  --muted:#8b9098;
  --accent:#ffd400;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
#video{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;top:-10px;left:-10px}

#app{
  display:flex;flex-direction:column;
  height:100dvh;
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
}

/* Mode-dependent buttons. Written as :not() so adding a mode never leaves a
   control from another one on screen. */
body:not([data-mode="live"])   .only-live{display:none!important}
body:not([data-mode="review"]) .only-review{display:none!important}

/* ---------- top ---------- */
#topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 4px}
.brand{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:.2px}
.brand-name{font-size:15px}
.swatches{display:inline-flex;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.swatches i{width:9px;height:16px;display:block}

/* ---------- size / orientation ---------- */
#sizebar{display:flex;gap:8px;padding:2px 12px 8px}
.seg{
  display:flex;flex:1;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:3px;gap:3px;
}
.seg-btn{
  flex:1;appearance:none;border:0;background:transparent;color:var(--muted);
  font:inherit;font-size:13px;font-weight:560;padding:7px 4px;border-radius:8px;
  cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;
}
.seg-btn.is-active{background:var(--panel-2);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.4)}
.seg-sm .seg-btn{font-size:11.5px;padding:6px 2px}
.seg-row{margin-bottom:6px}
.seg.is-muted{opacity:.38;pointer-events:none}
/* Ten styles will not fit a phone width, so this row scrolls sideways. */
.seg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.seg-scroll::-webkit-scrollbar{display:none}
.seg-scroll .seg-btn{flex:0 0 auto;padding:6px 11px}

/* ---------- stage ---------- */
/* A tall floor here would win its space from the footer rather than from the
   drawer, so on a short screen the bottom bar ended up overlapping the
   controls. Keep it small and let the capped drawer do the bounding. */
/* Drag and pinch are bound to the whole stage, not just the canvas: a portrait
   panel is only ~128px wide on screen, which is far too narrow to land two
   fingers on reliably. touch-action must be off across the same area. */
#stage{
  flex:1 1 auto;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px 10px;position:relative;gap:6px;
  touch-action:none;
}

/* Floating pill: says what a drag will move, and switches it, without
   costing layout height or needing a drawer open. */
.seg-float{
  position:absolute;top:2px;right:8px;z-index:3;
  flex:0 0 auto;width:auto;
  background:rgba(25,27,31,.86);
  backdrop-filter:blur(6px);
  padding:2px;border-radius:9px;
}
.seg-float .seg-btn{font-size:11px;padding:5px 11px;flex:0 0 auto}
.seg-float[hidden]{display:none}
/* NOT a flex container: a canvas as a flex item gets stretched by align-items
   and loses its aspect ratio. Its box is sized explicitly from JS instead. */
#frame{position:relative;display:block;line-height:0}
#preview{
  display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#000;
  border-radius:4px;
  box-shadow:0 0 0 1px var(--line),0 10px 34px rgba(0,0,0,.55);
  touch-action:none;
}
/* Below 1:1 the panel has to be shrunk to fit; nearest-neighbour would drop
   whole rows of dither pattern, so let the browser resample instead. */
#preview.smooth{image-rendering:auto}
/* Absolutely positioned so it never eats into the space layoutPreview()
   measures for the panel. */
#hint{
  position:absolute;left:0;right:0;bottom:1px;
  font-size:11.5px;color:var(--muted);text-align:center;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
#hint.show{opacity:1}
#chooser{
  position:absolute;inset:auto 24px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;max-width:320px;margin:0 auto;
}
#chooser[hidden]{display:none}
/* Nothing has been chosen yet, so there is no panel to show. */
body[data-mode="choose"] #frame{display:none}
#chooser p{margin:0 0 2px;color:var(--muted);font-size:13px;text-align:center}

.export-label{
  flex:1;min-width:0;color:var(--muted);
  font-size:12.5px;
}

#status{
  position:absolute;inset:auto 16px;top:50%;transform:translateY(-50%);
  text-align:center;color:var(--muted);font-size:14px;line-height:1.5;
}
#status b{color:var(--fg);display:block;margin-bottom:4px}
.status-btn{margin-top:12px;padding:10px 18px;font-size:14px}

/* ---------- controls ---------- */
/* The drawer is capped and scrolls internally rather than growing to fit its
   contents — left to size itself it ran to 410px, pushing the stage down to
   its floor and overflowing the viewport. The preview keeps the rest. */
#controls{
  background:var(--panel);border-top:1px solid var(--line);
  padding:8px 12px 6px;
  display:flex;flex-direction:column;
  flex:0 1 auto;min-height:0;
  max-height:min(40vh,380px);
}
.ctl-top,.panel-tabs{flex:0 0 auto}
.ctl-top{display:flex;align-items:center;gap:8px}
.ctl-top .seg{flex:1;min-width:0}
.text-btn{
  appearance:none;background:transparent;border:0;color:var(--muted);
  font:inherit;font-size:12.5px;padding:6px 2px;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:3px;
}
.text-btn.block{width:100%;justify-content:center;padding:8px 0 2px}
.text-btn:active{color:var(--fg)}
.chev{display:inline-block;transition:transform .15s}
#btn-adjust[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* One scroll region for the whole drawer — nesting a second scroller inside
   it for the sliders alone makes a flick land on whichever happened to be
   under the finger. */
#advanced,#textpanel{
  padding-top:8px;padding-bottom:4px;
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
#advanced[hidden],#textpanel[hidden]{display:none}

.panel-tabs{display:flex;gap:6px;margin-top:6px}
.panel-tabs .chip[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.panel-tabs .chip[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ---------- text overlay ---------- */
.layer-row{display:flex;gap:6px;margin-bottom:7px}
.lchip{
  appearance:none;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;
  width:38px;height:32px;border-radius:9px;cursor:pointer;padding:0;
}
.lchip.is-active{border-color:var(--accent);color:var(--accent)}
/* A layer with no text yet reads as a placeholder rather than a live caption. */
.lchip.is-empty{border-style:dashed}
.lchip.add{color:var(--fg);font-size:15px}

.text-input-row{display:flex;gap:6px;margin-bottom:7px}
#t-input{
  flex:1;min-width:0;appearance:none;
  background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:15px;padding:9px 11px;border-radius:9px;
  -webkit-user-select:text;user-select:text;
  /* a textarea so Return makes a line break; it grows with the text rather
     than scrolling a one-line window */
  resize:none;line-height:1.35;max-height:96px;overflow-y:auto;
}
#t-input::placeholder{color:var(--muted)}
#t-input:focus{outline:none;border-color:var(--accent)}

.font-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.font-row::-webkit-scrollbar{display:none}
.fchip{
  flex:0 0 auto;appearance:none;background:var(--panel-2);
  border:1px solid var(--line);color:var(--muted);
  font-size:15px;line-height:1;padding:8px 13px;border-radius:9px;cursor:pointer;
}
.fchip.is-active{border-color:var(--accent);color:var(--fg)}
/* Each chip previews its own face, so the choice is visible before applying. */
.fchip[data-font="sans"]  {font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:700}
.fchip[data-font="serif"] {font-family:Georgia,"Times New Roman",serif;font-weight:700}
.fchip[data-font="slab"]  {font-family:"American Typewriter","Rockwell","Courier New",serif;font-weight:700}
.fchip[data-font="mono"]  {font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:700}
.fchip[data-font="poster"]{font-family:Impact,Haettenschweiler,"Arial Narrow","Arial Black",sans-serif;letter-spacing:.5px}
.fchip[data-font="round"] {font-family:"Arial Rounded MT Bold","SF Pro Rounded","Trebuchet MS",sans-serif;font-weight:700}
.fchip[data-font="marker"]{font-family:"Bradley Hand",Chalkduster,"Segoe Script","Comic Sans MS",cursive}
.fchip[data-font="jpGothic"]{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;font-weight:600}
.fchip[data-font="jpMincho"]{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","MS PMincho",serif}
.fchip[data-font="jpMaru"]  {font-family:"Hiragino Maru Gothic ProN","Tsukushi A Round Gothic","Noto Sans JP",sans-serif;font-weight:600}
.fchip[data-font="jpKlee"]  {font-family:Klee,"Klee One","Toppan Bunkyu Midashi Mincho","Hiragino Mincho ProN",serif}
/* Separates the Latin faces from the Japanese ones in the scrolling row. */
.font-div{flex:0 0 auto;width:1px;background:var(--line);margin:2px 2px 8px}

.swatch-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.swatch-row .lbl{font-size:12.5px;color:var(--muted);width:52px;flex:0 0 auto}
.sw{
  width:30px;height:30px;border-radius:8px;cursor:pointer;padding:0;
  background:var(--c);border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.sw.is-active{border-color:var(--accent)}
.sw:disabled{opacity:.2;cursor:default}

.text-note{font-size:11.5px;color:var(--muted);text-align:center;padding:6px 0 2px}

.xform-row{display:flex;gap:6px;margin-bottom:6px}
.chip{
  appearance:none;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:13px;font-weight:560;height:34px;min-width:44px;
  border-radius:9px;cursor:pointer;padding:0 10px;
}
.chip.wide{flex:1}
.chip:active{background:#2b2f36}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

.sliders{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0 18px;
}
.slider{display:grid;grid-template-columns:74px 1fr 42px;align-items:center;gap:8px;padding:3px 0}
.slider[hidden]{display:none}
.slider span{font-size:12.5px;color:var(--muted)}
.slider output{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);text-align:right}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:26px;background:transparent;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:3px}
input[type=range]::-moz-range-track{height:3px;background:var(--line);border-radius:3px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--fg);margin-top:-7.5px;box-shadow:0 1px 3px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:var(--fg)}

/* ---------- bottom ---------- */
#bottombar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 20px 12px;background:var(--panel);flex:0 0 auto;
}
.side{display:flex;gap:6px;width:96px}
.side.right{justify-content:flex-end}
.icon-btn{
  position:relative;
  appearance:none;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  cursor:pointer;font:inherit;font-size:15px;padding:0;
}
.icon-btn.sm{width:32px;height:32px;border-radius:9px;font-size:13px}
.icon-btn:active{background:#2b2f36}
.icon-btn svg{width:21px;height:21px;fill:currentColor}
.icon-btn.is-on{border-color:var(--accent);color:var(--accent)}
.badge{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--accent);color:#000;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;
}
/* A class-level `display` outranks the UA rule for [hidden], so restate it. */
.badge[hidden]{display:none}
#shutter{
  appearance:none;width:64px;height:64px;border-radius:50%;
  background:transparent;border:3px solid var(--fg);padding:5px;cursor:pointer;
}
#shutter span{display:block;width:100%;height:100%;border-radius:50%;background:var(--fg);transition:transform .1s}
#shutter:active span{transform:scale(.86)}
#shutter:disabled{opacity:.35}
#btn-save{
  appearance:none;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:var(--accent);color:#141414;display:grid;place-items:center;
}
#btn-save svg{width:30px;height:30px;fill:currentColor}
#btn-save:active{transform:scale(.94)}

/* ---------- overlays ---------- */
.overlay{
  position:fixed;inset:0;z-index:20;background:rgba(8,9,10,.94);
  backdrop-filter:blur(10px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  overflow-y:auto;
}
/* auto margins rather than align-items:center — centring a flex item that is
   taller than its container pushes the overflow past the top edge, where it
   cannot be scrolled back to, taking the close button with it. */
.overlay > *{margin:auto 0}
.overlay[hidden]{display:none}
.overlay-inner{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px}
.overlay-title{display:flex;align-items:center;justify-content:space-between;font-weight:650;font-size:16px}

.sheet{
  width:100%;max-width:420px;margin-top:auto;
  display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;
}
.sheet-title{font-weight:650;font-size:15px;margin-bottom:2px}
.export-row{display:flex;align-items:center;gap:9px;margin-bottom:2px}
#export-note{
  flex:1;min-width:0;color:var(--muted);
  font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
}
.export-row .seg{flex:0 0 auto;width:auto}
.export-row .seg-btn{flex:0 0 auto;padding:5px 10px}

.sheet-title span{
  display:block;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);font-weight:400;margin-top:3px;
}
.btn{
  appearance:none;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:14.5px;font-weight:560;padding:13px 16px;border-radius:11px;cursor:pointer;
}
.btn small{font-weight:400;color:var(--muted);font-size:11.5px}
.sheet-note{
  color:var(--muted);font-size:12px;line-height:1.5;margin:2px 2px 0;
}
.sheet-note b{color:var(--fg)}
.sheet-note[hidden]{display:none}
.btn:active{background:#2b2f36}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#141414}
.btn-primary small{color:rgba(0,0,0,.55)}
.btn-block{display:block;text-align:center;width:100%}
.btn-quiet{background:transparent;border-color:transparent;color:var(--muted)}

.prose{color:var(--muted);font-size:13.5px;line-height:1.6}
.prose p{margin:0 0 12px}
.prose b{color:var(--fg)}
.ink-list{display:flex;flex-direction:column;gap:7px;margin:0 0 10px}
.ink{display:flex;align-items:center;gap:10px}
.ink span{flex:1;font-size:13px;color:var(--fg)}
.ink input[type=color]{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:46px;height:34px;padding:0;border:1px solid var(--line);
  border-radius:8px;background:none;cursor:pointer;
}
.ink input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.ink input[type=color]::-webkit-color-swatch{border:none;border-radius:5px}
/* A hex field as well as the swatch: iOS buries its hex entry behind the
   colour picker's sliders tab, and these values get copied from a report. */
.ink input[type=text]{
  flex:0 0 auto;width:104px;
  font:13px ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  padding:8px 9px;border-radius:8px;text-transform:lowercase;
  -webkit-user-select:text;user-select:text;
}
.ink input[type=text]:focus{outline:none;border-color:var(--accent)}

#chk-out{
  font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:11px;margin:10px 0 0;white-space:pre-wrap;word-break:break-word;
  color:var(--fg);-webkit-user-select:text;user-select:text;
}
#chk-out[hidden]{display:none}
#chk-out .bad{color:#ff8a5c}
#chk-out .good{color:#7fdba0}

.prose code{
  font:12px ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--panel-2);padding:1px 5px;border-radius:4px;color:var(--fg);
}

.overlay-note{color:var(--muted);font-size:13px;margin:-6px 0 0;line-height:1.5}

.store-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.store-badge{
  font-size:11.5px;font-weight:650;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.store-badge.is-online{color:#7fdba0;border-color:#2f5c42}
.store-badge.is-down{color:#ffb454;border-color:#5c4426}
.store-badge.is-local{color:var(--muted)}
#store-detail{
  flex:1;min-width:0;color:var(--muted);font-size:12px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;
}
.store-row .text-btn{flex:0 0 auto}

#store-form{
  display:flex;flex-direction:column;gap:9px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;
}
#store-form[hidden]{display:none}
.store-field{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.store-field input{
  appearance:none;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:14px;padding:9px 11px;border-radius:9px;
  -webkit-user-select:text;user-select:text;
}
.store-field input:focus{outline:none;border-color:var(--accent)}
.store-actions{display:flex;gap:7px;flex-wrap:wrap}
.store-actions .btn{flex:1;padding:10px 12px;font-size:13.5px;white-space:nowrap}

.proj-tag{
  position:absolute;top:5px;left:5px;z-index:1;
  font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(0,0,0,.72);color:#ffb454;padding:4px 6px;border-radius:5px;
}
#projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
#projects-grid figure{margin:0;position:relative}
#projects-grid img{
  width:100%;display:block;image-rendering:pixelated;border-radius:6px;
  box-shadow:0 0 0 1px var(--line);background:#000;
}
#projects-grid figcaption{
  font:10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--muted);margin-top:5px;
}
/* Transparent hit target over the thumbnail, so the delete button on top of
   it stays clickable. */
#projects-grid .proj-open{
  position:absolute;inset:0;bottom:22px;width:100%;
  background:transparent;border:0;border-radius:6px;cursor:pointer;padding:0;
}
#projects-grid .del{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.7);color:#fff;border:0;font-size:14px;line-height:1;cursor:pointer;
}
#projects-grid p{color:var(--muted);font-size:13px;grid-column:1/-1;text-align:center;margin:20px 0;line-height:1.6}

#toast{
  position:fixed;left:50%;bottom:calc(96px + var(--safe-b));transform:translateX(-50%) translateY(8px);
  z-index:40;pointer-events:none;
  background:rgba(30,33,38,.96);color:var(--fg);border:1px solid var(--line);
  padding:10px 16px;border-radius:11px;font-size:13.5px;white-space:nowrap;
  opacity:0;transition:opacity .18s,transform .18s;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-height:680px){
  #shutter,#btn-save{width:56px;height:56px}
  #topbar{padding:6px 14px 2px}
}

/* Landscape phones: trim the chrome so the preview and the drawer both keep
   something usable. */
@media (max-height:560px){
  #topbar{padding:3px 12px 0}
  .brand-name{display:none}
  #sizebar{padding:2px 12px 5px}
  #controls{max-height:46vh;padding:6px 12px 4px}
  #bottombar{padding:5px 18px 7px}
  #shutter,#btn-save{width:46px;height:46px}
  .icon-btn{width:38px;height:38px}
  .swatches i{height:14px}
}