/* Orbit OS — nature desktop tokens + coming-soon lock screen */
:root {
  --glass: rgba(14, 24, 19, .42); --glass-2: rgba(14, 24, 19, .62); --glass-line: rgba(255, 255, 255, .14);
  --leaf: #a7d7a0; --moss: #3f7a55; --fern: #6fbf73; --amber: #f4b860; --cream: #f6f1e3; --bark: #3a2c20;
  --text: #f7f4ea; --text-2: rgba(247, 244, 234, .72); --text-3: rgba(247, 244, 234, .5);
  --display: 'Bricolage Grotesque', system-ui, sans-serif; --font: 'Instrument Sans', system-ui, sans-serif;
}
.os-body { margin: 0; min-height: 100vh; overflow: hidden; background: #0d1a14; color: var(--text); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
#wall { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.wall-shade { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 30%, transparent 60%, rgba(0,0,0,.35)); }
.glass { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); }

/* ---------- lock screen ---------- */
.gate[hidden] { display: none !important; }
.gate { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; overflow-y: auto; transition: opacity .6s, transform .6s; }
.gate.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
.g-top { display: flex; align-items: center; gap: 12px; padding: 16px 22px; font-weight: 650; font-size: 14px; }
.g-logo { display: flex; align-items: center; gap: 10px; font: 800 18px var(--display); letter-spacing: -.01em; }
.g-mark { width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(135deg, #8fd694, #2f7a55); display: grid; place-items: center; box-shadow: 0 4px 14px -4px rgba(0,0,0,.5); }
.g-mark svg { width: 17px; height: 17px; }
.g-sp { flex: 1; }
.g-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; font-size: 13px; color: var(--text-2); }
.g-pill svg { width: 15px; height: 15px; }
.g-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 18px 130px; gap: 22px; }
.g-day { font: 700 15px var(--display); letter-spacing: .32em; text-transform: uppercase; color: var(--text-2); text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.g-time { font: 800 clamp(84px, 17vw, 190px)/.85 var(--display); letter-spacing: -.045em; text-shadow: 0 8px 50px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.g-time small { font-size: .28em; letter-spacing: 0; margin-left: .15em; opacity: .8; }
.g-card { width: min(560px, 100%); border-radius: 28px; padding: 26px 26px 22px; text-align: left; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.g-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); }
.g-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--fern); box-shadow: 0 0 0 4px rgba(111,191,115,.25); animation: gpulse 2s infinite; }
@keyframes gpulse { 50% { box-shadow: 0 0 0 8px rgba(111,191,115,0); } }
.g-card h1 { font: 800 clamp(30px, 5vw, 42px)/1.05 var(--display); letter-spacing: -.02em; margin: 10px 0 8px; }
.g-card p { color: var(--text-2); margin: 0; }
.g-prog { margin-top: 20px; }
.g-prog-h { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); margin-bottom: 8px; font-weight: 600; }
.g-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.g-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #4f9a63, #a7d7a0, #f4d27a); transition: width 1.6s cubic-bezier(.2,.8,.2,1); }
.g-bar i::after { content: ''; position: absolute; right: -2px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle, #fff 30%, rgba(255,255,255,0) 70%); }
.g-feats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.g-feats span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: var(--text-2); }
.g-feats span.ok { color: #c9f0c4; border-color: rgba(167,215,160,.35); background: rgba(111,191,115,.14); }
.g-feats svg { width: 13px; height: 13px; }
.g-early { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-early button.link { background: none; border: 0; color: var(--text-3); font: 600 13px var(--font); cursor: pointer; padding: 4px 0; display: inline-flex; gap: 6px; align-items: center; }
.g-early button.link:hover { color: var(--text); }
.g-early svg { width: 14px; height: 14px; }
.g-form { display: none; gap: 8px; width: 100%; }
.g-form.show { display: flex; }
.g-form input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: var(--text); font: 15px var(--font); outline: none; }
.g-form input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(167,215,160,.25); }
.g-form button { padding: 0 16px; border-radius: 12px; border: 0; background: var(--cream); color: #17251c; font: 700 14px var(--font); cursor: pointer; }
.g-form.shake { animation: gshake .4s; }
@keyframes gshake { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.g-msg { font-size: 13px; color: #ffb4a8; width: 100%; min-height: 0; }

/* dock of locked apps */
.g-dock { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; display: flex; gap: 8px; padding: 9px; border-radius: 24px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
.g-dock::-webkit-scrollbar { display: none; }
.g-app { position: relative; width: 50px; height: 50px; border-radius: 15px; border: 0; display: grid; place-items: center; color: #fff; cursor: pointer; flex: none; transition: transform .25s cubic-bezier(.3,1.6,.5,1); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 16px -8px rgba(0,0,0,.6); }
.g-app svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-app:hover { transform: translateY(-8px) scale(1.08); }
.g-app.bounce { animation: gbounce .6s; }
@keyframes gbounce { 30% { transform: translateY(-16px); } 60% { transform: translateY(0); } 80% { transform: translateY(-5px); } }
.g-app .lk { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(10,16,12,.85); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); }
.g-app .lk svg { width: 10px; height: 10px; stroke-width: 2.6; }
.g-sep { width: 1px; background: rgba(255,255,255,.15); margin: 6px 2px; flex: none; }
.g-tip { position: fixed; z-index: 9; pointer-events: none; padding: 6px 11px; border-radius: 10px; background: rgba(10,16,12,.85); color: #fff; font-size: 12.5px; font-weight: 650; white-space: nowrap; transform: translate(-50%, -100%); opacity: 0; transition: opacity .15s; }
.g-tip.show { opacity: 1; }
.g-toast { position: fixed; left: 50%; top: 18px; transform: translate(-50%, -20px); z-index: 9; padding: 10px 16px; border-radius: 14px; font-weight: 650; font-size: 14px; opacity: 0; transition: opacity .25s, transform .25s; }
.g-toast.show { opacity: 1; transform: translate(-50%, 0); }
.g-scene { background: none; border: 0; color: var(--text-2); cursor: pointer; font: 600 13px var(--font); }
.g-scene:hover { color: var(--text); }
:focus-visible { outline: 2.5px solid var(--leaf); outline-offset: 2px; }
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 600px) {
  .g-top .g-pill.hide-sm { display: none; }
  .g-main { justify-content: flex-start; padding-top: 6vh; gap: 16px; }
  .g-card { padding: 20px; border-radius: 22px; }
  .g-app { width: 44px; height: 44px; border-radius: 13px; }
}
@media (prefers-reduced-motion: reduce) { .gate, .g-bar i, .g-app { transition: none; } .g-eyebrow i, .g-app.bounce { animation: none; } }