:root{
  --steel:#D5DBD8; --steel-2:#C3CBC7; --iron:#1E2522; --iron-2:#4A5550;
  --pasture:#3F6B4A; --amber:#F2A900; --fault:#C4432F; --bar:rgba(30,37,34,.14);
  --panel:#E4E8E6;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --steel:#161C19; --steel-2:#232B27; --iron:#E8ECEA; --iron-2:#9AA6A0;
  --pasture:#7FB38E; --fault:#E0735F; --bar:rgba(232,236,234,.09); --panel:#1D2420;}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--steel);color:var(--iron);
  font:400 18px/1.45 "Barlow",system-ui,sans-serif;-webkit-text-size-adjust:100%}
main{max-width:34rem;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}
header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px}
header h1{font:700 26px/1 "Barlow Condensed",sans-serif;letter-spacing:.01em;margin:0}
header p{margin:0;color:var(--iron-2);font-size:15px}

/* The gate itself: bars you hold to open */
.gate{margin:0 0 30px}
.leaf{position:relative;display:block;width:100%;min-height:188px;padding:20px 20px 18px;text-align:left;
  border:3px solid var(--iron);border-radius:6px 6px 2px 2px;background:var(--panel);color:var(--iron);
  font:inherit;cursor:pointer;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.leaf::before{content:"";position:absolute;inset:0;transition:transform .9s cubic-bezier(.6,0,.2,1);
  background:repeating-linear-gradient(90deg,transparent 0 30px,var(--bar) 30px 35px)}
.leaf .fill{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--amber)}
.leaf.pressing .fill{height:100%;transition:height .6s linear}
.leaf.sent::before{transform:translateX(88%)}
.leaf.sent .fill{height:100%;opacity:.35;transition:opacity 1.6s ease}
.leaf > *{position:relative}
.leaf .plate{display:block;width:fit-content;max-width:100%;background:var(--panel);padding:2px 16px 4px 0}
.leaf.pressing .plate,.leaf.sent .plate{background:transparent;transition:background .15s}
.leaf .gname{display:block;font:700 34px/1.02 "Barlow Condensed",sans-serif;letter-spacing:.005em;max-width:14ch}
.leaf .state{display:block;margin-top:8px;font-size:17px;color:var(--iron-2)}
.leaf .state.ok{color:var(--pasture)} .leaf .state.bad{color:var(--fault)}
.leaf .cue{display:block;margin-top:34px;font:600 21px/1 "Barlow Semi Condensed",sans-serif}
.leaf:disabled{cursor:default;border-style:dashed;border-color:var(--iron-2)}
.leaf:disabled .cue{color:var(--iron-2)}
.leaf:focus-visible,.times button:focus-visible,.endhold:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

.times{display:flex;align-items:center;gap:8px;margin-top:10px}
.times span{color:var(--iron-2);font-size:15px;margin-right:4px;white-space:nowrap}
.times button,.endhold{flex:1;min-height:46px;font:600 17px "Barlow Semi Condensed",sans-serif;color:var(--iron);
  background:transparent;border:2px solid var(--steel-2);border-radius:4px;cursor:pointer}
.times button:disabled{opacity:.45}
.endhold{width:100%;margin-top:10px;background:var(--amber);border-color:var(--amber);color:#1E2522}

.recent h2{font:700 20px "Barlow Condensed",sans-serif;margin:8px 0 6px}
.recent ol{list-style:none;margin:0;padding:0}
.recent li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--steel-2);font-size:16px}
.recent li time{color:var(--iron-2);white-space:nowrap}
.recent li.miss{color:var(--fault)}
.note{margin-top:22px;color:var(--iron-2);font-size:15px;max-width:60ch}

/* sign-in pages */
.welcome h2{font:700 30px/1.05 "Barlow Condensed",sans-serif;margin:6px 0 10px}
.welcome ol{padding-left:1.3em;margin:0 0 18px} .welcome li{margin:6px 0}
.primary{display:block;width:100%;min-height:64px;margin:16px 0 10px;font:700 22px "Barlow Semi Condensed",sans-serif;
  background:var(--amber);color:#1E2522;border:0;border-radius:4px;cursor:pointer}
.quiet{display:block;width:100%;min-height:48px;font:500 17px "Barlow",sans-serif;background:transparent;color:var(--iron-2);
  border:2px solid var(--steel-2);border-radius:4px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.leaf::before,.leaf .fill{transition:none!important}}