:root{
  --paper:#F1ECE1;
  --ink:#23221C;
  --ink-soft:rgba(35,34,28,.55);
  --red:#C3392B;
  --amber:#CE9430;
  --green:#2F7D4F;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;height:100dvh;overflow:hidden;position:fixed;width:100%;overscroll-behavior:none}
body{
  background:var(--paper);
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  color:var(--ink);
  touch-action:none;user-select:none;-webkit-user-select:none;
}
#stage{position:absolute;inset:0;touch-action:none}
header{
  position:fixed;top:0;left:0;right:0;z-index:5;
  padding:calc(10px + env(safe-area-inset-top)) 16px 8px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  pointer-events:none;
}
#crumb{display:flex;align-items:center;gap:10px;pointer-events:auto}
#back{
  display:none;
  font-family:inherit;font-size:11px;letter-spacing:.14em;font-weight:600;
  background:var(--ink);color:var(--paper);border:none;padding:7px 12px;cursor:pointer;
}
#back.show{display:block}
#where{font-size:11px;font-weight:600;letter-spacing:.2em}
#where span{color:var(--ink-soft)}
#hint{font-size:10px;letter-spacing:.06em;color:var(--ink-soft);text-align:right;max-width:44%}
#banner{
  position:fixed;top:calc(52px + env(safe-area-inset-top));left:50%;
  transform:translate(-50%,-160%);
  z-index:6;background:var(--ink);color:var(--paper);
  font-size:11px;letter-spacing:.18em;padding:10px 18px;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2);white-space:nowrap;
}
#banner.show{transform:translate(-50%,0)}

#floors{
  position:fixed;right:8px;top:46%;transform:translateY(-60%);
  z-index:5;display:none;flex-direction:column;gap:6px;
}
#floors.show{display:flex}
#floors button{width:38px;height:38px;flex:none;padding:0;font-size:10px;background:var(--paper)}
#floors button.on{background:var(--ink);color:var(--paper)}

#bar{
  position:fixed;left:0;right:0;bottom:0;z-index:5;
  background:var(--paper);border-top:1.5px solid var(--ink);
  padding:10px 10px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:9px;touch-action:auto;
}
#modes{display:flex;gap:5px}
button{
  font-family:inherit;font-size:10px;letter-spacing:.09em;font-weight:600;
  background:transparent;color:var(--ink);
  border:1.5px solid var(--ink);padding:11px 0;flex:1;cursor:pointer;
}
button.on{background:var(--ink);color:var(--paper)}
button.ghost{border-color:var(--ink-soft);color:var(--ink-soft);flex:.7}
#saveRow{display:flex;gap:5px;align-items:center}
#saveRow button{flex:0 0 auto;padding:8px 14px;font-size:9.5px}
#saveState{
  flex:1;text-align:right;
  font-size:9px;letter-spacing:.1em;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#timeRow{display:flex;align-items:center;gap:12px}
#timeRow label{font-size:10px;letter-spacing:.14em;color:var(--ink-soft);white-space:nowrap}
#days{flex:1;-webkit-appearance:none;appearance:none;height:1.5px;background:var(--ink-soft);outline:none;touch-action:auto}
#days::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink);cursor:pointer;
}
#dayVal{font-size:10px;letter-spacing:.1em;min-width:58px;text-align:right}

#classes{
  position:fixed;left:0;right:0;bottom:168px;z-index:5;
  display:none;gap:6px;padding:0 12px;
  overflow-x:auto;touch-action:pan-x;-webkit-overflow-scrolling:touch;
}
#classes.show{display:flex}
.chip{
  flex:0 0 auto;
  font-family:inherit;font-size:9.5px;letter-spacing:.1em;font-weight:600;
  border:1.5px solid rgba(35,34,28,.35);color:var(--ink);
  padding:8px 12px;cursor:pointer;background:var(--paper);
  white-space:nowrap;
}
.chip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

#card{
  position:fixed;left:0;right:0;bottom:0;z-index:8;
  background:var(--paper);border-top:1.5px solid var(--ink);
  padding:12px 12px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(110%);
  transition:transform .26s cubic-bezier(.2,.9,.3,1);
  touch-action:auto;display:flex;flex-direction:column;gap:9px;
}
#card.show{transform:translateY(0)}
#card .scrollRow{
  display:flex;gap:5px;align-items:center;
  overflow-x:auto;touch-action:pan-x;-webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}
#card .lab{font-size:9px;letter-spacing:.16em;color:var(--ink-soft);flex:0 0 auto;min-width:52px}
#card .chip{padding:8px 10px}
#card .chip.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#topRow{display:flex;gap:8px;align-items:stretch}
#cCheck{flex:0 0 44%;font-size:12px;letter-spacing:.14em;background:var(--ink);color:var(--paper)}
#cardState{
  flex:1;display:flex;align-items:center;
  font-size:9.5px;letter-spacing:.1em;line-height:1.5;color:var(--ink);
}
#inputRow{display:flex;gap:8px;align-items:center}
#card input{
  font-family:inherit;font-size:11px;letter-spacing:.08em;
  background:transparent;border:none;border-bottom:1.5px solid var(--ink-soft);
  color:var(--ink);padding:6px 2px;outline:none;flex:1;min-width:50px;
}
#ownerIn{max-width:64px;text-transform:uppercase;letter-spacing:.2em}
#cardBtns{display:flex;gap:6px}
#cardBtns .danger{border-color:var(--red);color:var(--red)}
#importFile{display:none}
@media (prefers-reduced-motion:reduce){ #banner,#card{transition:none} }