:root { color-scheme: dark; --ink:#f1eee8; --muted:#a8a49c; --line:rgba(241,238,232,.16); --accent:#d2e46f; --accent-ink:#222718; --surface:#171815; }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; } body { min-height:100vh; color:var(--ink); background:#10110f; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; }
.screen { min-height:100vh; } [hidden] { display:none !important; } .eyebrow { margin:0; color:var(--accent); font:700 .7rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; } h1,h2,p { margin-top:0; } h1 { margin-bottom:1.5rem; font-size:clamp(3.5rem,7vw,7rem); line-height:.9; letter-spacing:-.06em; font-weight:500; } h1 em { color:var(--accent); font-weight:400; } h2 { margin:.75rem 0 .6rem; font-size:clamp(1.8rem,4vw,2.5rem); line-height:1.05; letter-spacing:-.04em; font-weight:500; }
.loading-screen { display:grid; place-content:center; gap:1rem; text-align:center; background:#10110f; color:var(--muted); }
.login-screen { display:grid; grid-template-columns:minmax(280px,.9fr) 1.1fr; } .brand-block { display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,7vw,7rem); background:#131411; border-right:1px solid var(--line); } .brand-block>p:last-child { max-width:18rem; margin-bottom:0; color:var(--muted); font-size:1.15rem; line-height:1.45; } .login-card { display:grid; align-content:center; width:min(100%,28rem); margin:auto; padding:2rem; }
.button { width:100%; border:0; border-radius:3px; padding:.9rem 1rem; font:700 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; cursor:pointer; } .button:disabled { cursor:wait; opacity:.55; } .button-google,.button-secondary { color:var(--ink); background:#252721; border:1px solid var(--line); } .google-mark { display:inline-grid; place-items:center; width:1.2rem; height:1.2rem; margin-right:.45rem; border-radius:50%; background:white; color:#4285f4; font:700 .85rem Arial; }.message { min-height:1.3rem; margin:1rem 0 0; color:#ff9e91; font:.78rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }
.workspace-screen { position:relative; background:radial-gradient(circle at 80% 10%,#24281d,transparent 35%),var(--surface); }.topbar { display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 clamp(1.25rem,5vw,5rem); border-bottom:1px solid var(--line); }.nav-left,.nav-right { display:flex; align-items:center; gap:.85rem; }.wordmark { color:var(--accent); text-decoration:none; font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.18em; }.icon-button,.avatar-button { display:grid; place-items:center; width:42px; height:42px; padding:0; color:var(--ink); background:transparent; border:1px solid transparent; border-radius:50%; cursor:pointer; }.icon-button:hover,.avatar-button:hover,.icon-button[aria-expanded="true"],.avatar-button[aria-expanded="true"] { background:#252721; border-color:var(--line); }.icon-button:focus-visible,.avatar-button:focus-visible,.nav-item:focus-visible,.menu-action:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }.nav-left .icon-button { border-radius:4px; }.nav-left .icon-button span { width:16px; height:1px; margin:2px 0; background:currentColor; }.gear-button { font-size:1.35rem; line-height:1; }.avatar-button { overflow:hidden; background:var(--accent); color:var(--accent-ink); font:700 .9rem ui-monospace,SFMono-Regular,Menlo,monospace; background-size:cover; background-position:center; }.avatar-button.has-photo span { display:none; }.popover { position:absolute; z-index:2; border:1px solid var(--line); background:#1c1e19; box-shadow:0 16px 36px rgba(0,0,0,.28); }.nav-menu { top:62px; left:clamp(1.25rem,5vw,5rem); width:210px; padding:.5rem; }.account-menu { top:62px; right:clamp(1.25rem,5vw,5rem); width:270px; padding:.6rem; }.nav-item,.menu-action { display:flex; align-items:center; justify-content:space-between; width:100%; padding:.75rem .8rem; border:0; border-radius:3px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; font:600 .82rem ui-monospace,SFMono-Regular,Menlo,monospace; }.nav-item small { color:var(--muted); font:inherit; font-size:.65rem; }.nav-item:hover,.nav-item.active,.menu-action:hover { background:#292c25; }.account-summary { display:flex; align-items:center; gap:.75rem; padding:.55rem .4rem .8rem; }.account-summary div { min-width:0; }.account-summary strong,.account-summary span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-summary strong { font-size:.95rem; font-weight:500; }.account-summary span { margin-top:.2rem; color:var(--muted); font:.68rem ui-monospace,SFMono-Regular,Menlo,monospace; }.avatar-large { display:grid !important; flex:0 0 auto; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font:700 .78rem ui-monospace,SFMono-Regular,Menlo,monospace; }.menu-rule { height:1px; margin:.1rem 0 .4rem; background:var(--line); }.menu-action { display:block; }.menu-action.danger { color:#ffa79b; }.home-content,.settings-content,.plans-content { width:min(100% - 2.5rem,70rem); margin:0 auto; padding:clamp(4rem,11vw,10rem) 0; }.intro { max-width:30rem; color:var(--muted); font-size:1.15rem; line-height:1.45; }.next-card { max-width:33rem; margin-top:3rem; padding:1.8rem; border:1px solid var(--line); background:rgba(19,20,17,.6); }.next-card p:last-child { margin:0; color:var(--muted); line-height:1.4; }.settings-content { max-width:55rem; }.settings-row { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:3rem; padding:1.5rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.settings-row h2 { margin:0 0 .35rem; font-size:1.1rem; letter-spacing:-.01em; }.settings-row p { margin:0; color:var(--muted); }.settings-row .button { width:auto; white-space:nowrap; }
.coming-soon-screen { display:grid; place-items:center; padding:2rem; background:radial-gradient(circle at 75% 15%,#283020,transparent 36%),#131411; }.coming-soon-card { width:min(100%,35rem); }.coming-soon-card>p:not(.eyebrow) { max-width:28rem; color:var(--muted); font-size:1.15rem; line-height:1.5; }.coming-soon-card strong { color:var(--ink); font-weight:500; }.coming-soon-card .button { width:auto; margin-top:1rem; }
.plans-cta { display:inline-block; width:auto; margin-top:1.4rem; padding:.9rem 1.4rem; text-decoration:none; }
.plan-create,.plan-add-step { display:flex; gap:.6rem; margin:1.6rem 0 0; } .plan-create input,.plan-add-step input { flex:1; min-width:0; padding:.9rem 1rem; color:var(--ink); background:#1c1e19; border:1px solid var(--line); border-radius:3px; font:500 .95rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; } .plan-create input:focus-visible,.plan-add-step input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .plan-create .button,.plan-add-step .button { width:auto; white-space:nowrap; }
.plans-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:1rem; margin-top:2rem; } .plans-empty { margin-top:2rem; color:var(--muted); } .plan-card { position:relative; display:flex; align-items:stretch; border:1px solid var(--line); border-radius:3px; background:rgba(19,20,17,.6); } .plan-card:hover { border-color:var(--accent); } .plan-open { display:flex; flex:1; flex-direction:column; gap:.45rem; padding:1.2rem; border:0; background:transparent; color:var(--ink); text-align:left; cursor:pointer; font:inherit; } .plan-title { font-size:1.05rem; font-weight:500; letter-spacing:-.01em; } .plan-meta { color:var(--muted); font:.7rem ui-monospace,SFMono-Regular,Menlo,monospace; } .plan-bar { overflow:hidden; height:3px; border-radius:2px; background:#252721; } .plan-bar span { display:block; height:100%; background:var(--accent); transition:width .2s ease; } .plan-delete { padding:0 .8rem; border:0; border-left:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; } .plan-delete:hover { color:#ffa79b; }
.plan-back { width:auto; margin-bottom:1.6rem; padding-inline:1.2rem; } .plan-detail-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.4rem; } .plan-detail-head h2 { margin:0; } .plan-detail-head .button { width:auto; white-space:nowrap; } .plan-steps { margin:1.8rem 0 0; padding:0; list-style:none; } .step { display:flex; align-items:center; gap:.8rem; padding:.8rem .4rem; border-bottom:1px solid var(--line); } .step-toggle { display:grid; place-items:center; flex:0 0 auto; width:26px; height:26px; padding:0; color:var(--accent-ink); background:transparent; border:1px solid var(--line); border-radius:50%; cursor:pointer; font:700 .8rem Arial; } .step.done .step-toggle { background:var(--accent); border-color:var(--accent); } .step-text { flex:1; min-width:0; overflow-wrap:anywhere; } .step.done .step-text { color:var(--muted); text-decoration:line-through; } .step-remove { padding:.2rem .4rem; border:0; background:transparent; color:var(--muted); cursor:pointer; } .step-remove:hover { color:#ffa79b; } .plan-add-step { margin-top:1.4rem; }
@media (max-width:700px) { .login-screen { display:block; }.brand-block { min-height:42vh; padding:2rem 1.5rem; border-right:0; border-bottom:1px solid var(--line); }.brand-block h1 { font-size:clamp(3.5rem,16vw,5rem); }.brand-block>p:last-child { display:none; }.login-card { min-height:58vh; padding:2rem 1.25rem; }.topbar { gap:1rem; }.account span { display:none; } }