/* The one way in: the app, behind glass, with the logo as its door. It
   mirrors the app's Your documents, so that going in looks like arriving. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f6f6f7, #111113);
  --panel: light-dark(#fbfbfc, #161618);
  --card: light-dark(#ffffff, #1c1c1f);
  --fg: light-dark(#18181b, #ececee);
  --muted: light-dark(#67676f, #a1a1aa);
  --rule: light-dark(#e4e4e7, #2e2e33);
  --line: light-dark(#f0f0f2, #26262a);
  --ui-bg: light-dark(#f1f1f3, #232327);
  --accent: light-dark(#3d4ed8, #8e9af6);
  --on-ink: light-dark(#ffffff, #18181b);
  --u: 4px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--fg); }
body { font: 14px/1.5 Inter, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.hand { fill: var(--on-ink); }
.cuff { fill: #3d4ed8; }

/* The app. */
.ghost { position: fixed; inset: 0; display: flex; background: var(--bg); }
.panel { flex: none; width: 340px; padding: 16px 14px; background: var(--panel); border-right: 1px solid var(--rule); animation: from-left .55s var(--ease) both; }
.brand { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px; font-weight: 650; font-size: 16.5px; letter-spacing: -.015em; }
.brand span { margin-left: -9px; color: var(--muted); font-weight: 500; }
.brand .ink { fill: var(--fg); }
.card { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding: 12px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; animation: rise .55s .08s var(--ease) both; }
.seg { display: flex; gap: 2px; padding: 3px; background: var(--ui-bg); border-radius: 10px; font-size: 13.5px; font-weight: 600; text-align: center; }
.seg b, .seg i { flex: 1; padding: 10px 0; border-radius: 8px; font-style: normal; font-weight: inherit; color: var(--muted); }
.seg b { background: var(--card); color: var(--fg); }
.find { height: 44px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.new { padding: 11px 0; border: 1px solid var(--rule); border-radius: 9px; font-size: 13.5px; font-weight: 600; text-align: center; }
.work { flex: 1; min-width: 0; padding: 32px 44px; }
.wtitle { max-width: 880px; margin-bottom: 20px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; animation: rise .55s .14s var(--ease) both; }
.list { max-width: 880px; background: var(--card); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; animation: rise .6s .2s var(--ease) both; }
.row { padding: 16px 18px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row u { display: block; height: 10px; border-radius: 5px; background: var(--ui-bg); }
.row u:first-child { margin-bottom: 9px; height: 12px; background: var(--rule); }

/* The glass, once the app has arrived. */
.veil { position: fixed; inset: 0; z-index: 2; background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: fade .6s .7s ease-out both; }

/* The door. */
.door { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; pointer-events: none; }
.door a { pointer-events: auto; color: inherit; }
.door h1 { margin: 26px 0 6px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; animation: rise .5s 1s var(--ease) both; }
.door p:empty { display: none; }
.door p { margin: 0; font-size: 15px; color: var(--muted); animation: rise .5s 1.08s var(--ease) both; }
[hidden] { display: none !important; }
section { display: flex; flex-direction: column; align-items: center; width: 100%; }
.close { position: absolute; top: 14px; right: 18px; font-size: 24px; line-height: 1; text-decoration: none; color: var(--muted); pointer-events: auto; }
section form { display: grid; gap: 8px; width: min(300px, 100%); margin-top: 20px; pointer-events: auto; animation: rise .5s 1.16s var(--ease) both; }
section form input:not([type="checkbox"]), section form button { min-height: 42px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 9px; background: var(--card); color: var(--fg); font: inherit; }
section form input[name="code"] { min-height: 52px; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: .16em; text-align: center; }
section form button { font-weight: 600; cursor: pointer; }
section form .wrong { font-size: 13.5px; color: #b91c1c; animation: none; }
section form .wrong:empty { display: none; }
.shared { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; text-align: left; color: var(--muted); }
.now h1, .now p, .now form { animation-delay: 0s; }
.now .help { animation-delay: 12s; }
.door .help { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); font-size: 13.5px; animation: fade .6s 12s both; }
.mark { position: relative; width: calc(28 * var(--u)); height: calc(28 * var(--u)); perspective: calc(130 * var(--u)); animation: arrive .7s .85s var(--ease) both; }
.frame, .leaf { position: absolute; left: var(--u); top: var(--u); width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(6.5 * var(--u)); }
.frame { border: calc(1.5 * var(--u)) solid color-mix(in srgb, var(--fg) 45%, transparent); }
.leaf { background: var(--fg); transform-origin: left center; animation: ajar 3.2s 1.6s ease-in-out infinite; }
.leaf svg { display: block; width: 100%; height: 100%; }
.mark::before, .mark::after { content: ''; position: absolute; left: var(--u); top: var(--u); width: calc(26 * var(--u)); height: calc(26 * var(--u)); border: 2px solid var(--accent); border-radius: calc(6.5 * var(--u)); opacity: 0; animation: ring 3.2s 1.6s ease-out infinite; }
.mark::after { animation-delay: 3.2s; }

/* Going in: the logo swings open like a door, and the sharp app,
   added above the glass by waiting.js, grows out of the doorway. */
.entering .door h1, .entering .door p, .entering form, .entering .close { opacity: 0; transition: opacity .16s; animation: none; pointer-events: none; }
.entering .mark { animation: none; }
.entering .mark::before, .entering .mark::after { animation: none; opacity: 0; }
.entering .frame { border-color: var(--fg); box-shadow: 0 0 calc(16 * var(--u)) calc(2 * var(--u)) color-mix(in srgb, var(--accent) 55%, transparent); opacity: 0; transition: border-color .22s, box-shadow .3s .1s, opacity .22s .42s; }
.entering .leaf { animation: none; transform: rotateY(-112deg); opacity: 0; transition: transform .36s cubic-bezier(.6, 0, .3, 1) .16s, opacity .16s .4s; }
.sharp { z-index: 3; }
.sharp, .sharp * { animation: none !important; }

@keyframes from-left { from { opacity: 0; transform: translateX(-18px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: scale(.82); } }
@keyframes ajar { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(-20deg); } }
@keyframes ring { 0% { opacity: .4; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }

@media (max-width: 859.98px) {
  :root { --u: 3.4px; }
  .ghost { display: block; }
  .panel { width: auto; border-right: 0; border-bottom: 1px solid var(--rule); }
  .work { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mark::before, .mark::after { display: none; }
}