:root { --paper:#f4f0e7; --ink:#f4f0e7; --muted:#918e86; --line:#2d2b28; --bg:#10100f; --panel:#171614; --accent:#d8e6b7; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px 'DM Sans', sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { max-width:1440px; margin:auto; padding:0 56px; }
.topbar { height:82px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); text-decoration:none; display:flex; gap:12px; align-items:center; font:500 14px 'DM Mono',monospace; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--ink); border-radius:50%; font-family:'Playfair Display',serif; font-size:16px; }
.topbar-meta,.preview-toolbar span,.preview-footer,footer { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.04em; text-transform:uppercase; }
.topbar-meta { display:flex; align-items:center; gap:11px; }.live-dot,.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#a5c778; box-shadow:0 0 0 4px #a5c77818; }.divider { width:1px; height:14px; background:var(--line); }
.intro { display:flex; justify-content:space-between; gap:40px; padding:82px 0 70px; }.intro h1,.api-section h2 { margin:12px 0 0; font:500 clamp(46px,6vw,88px)/.95 'Playfair Display',serif; letter-spacing:-.045em; }.intro h1 em,.api-section h2 em { color:var(--accent); font-style:normal; }.eyebrow { margin:0; font:11px 'DM Mono',monospace; letter-spacing:.13em; color:var(--muted); }.eyebrow span { color:var(--accent); margin-left:10px; }.intro-copy { max-width:310px; margin:4px 8% 0 0; color:#a9a69f; line-height:1.7; }
.workspace { display:grid; grid-template-columns:360px 1fr; min-height:785px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.sidebar { border-right:1px solid var(--line); padding:38px 36px 40px 0; }.step-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:32px; }.step-number { color:var(--accent); font:11px 'DM Mono',monospace; padding-top:4px; }.step-head h2 { font-size:18px; font-weight:500; margin:5px 0 0; }.field-label { display:flex; justify-content:space-between; margin:20px 0 10px; color:#85827b; font:10px 'DM Mono',monospace; letter-spacing:.12em; }.upload-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; height:128px; color:#b8b4aa; border:1px dashed #4a4740; background:#121210; font-size:12px; text-align:center; }.upload-zone input { display:none; }.upload-zone small { color:#68655f; font:10px 'DM Mono',monospace; }.upload-plus { font-size:23px; font-weight:300; color:var(--accent); }.field-row { margin-top:25px; }.field-row input[type=range] { width:100%; accent-color:var(--accent); }.divider-line { height:1px; background:var(--line); margin:32px 0; }.compact { margin-bottom:18px; }.segmented { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid #34312d; }.segmented button { border:0; background:transparent; color:#827f78; padding:10px 4px; font:10px 'DM Mono',monospace; letter-spacing:.07em; }.segmented button.active { color:var(--bg); background:var(--accent); }.color-row { display:flex; align-items:center; justify-content:space-between; }.color-row .field-label { display:block; margin:0; }.swatches { display:flex; gap:8px; }.swatch { width:18px; height:18px; border:0; border-radius:50%; background:var(--swatch); outline:1px solid transparent; outline-offset:3px; }.swatch.active { outline-color:var(--swatch); }.primary-button { width:100%; margin-top:28px; padding:16px; display:flex; justify-content:space-between; border:0; background:var(--accent); color:#10100f; font:500 12px 'DM Mono',monospace; }.hint { color:#67645f; font-size:11px; line-height:1.6; }
.preview-column { padding:38px 0 0 58px; }.preview-toolbar { display:flex; align-items:flex-start; justify-content:space-between; }.preview-toolbar span { display:block; margin-top:7px; }.ghost-button { border:1px solid #383530; color:#b9b5ab; background:transparent; padding:10px 12px; font:10px 'DM Mono',monospace; text-transform:uppercase; }.phone-stage { display:grid; place-items:center; min-height:686px; }.phone { width:307px; height:635px; position:relative; overflow:hidden; border:7px solid #292825; border-radius:43px; box-shadow:0 30px 80px #0009, inset 0 0 0 1px #7773; background:#303632; }.phone-bg { position:absolute; inset:0; background:linear-gradient(135deg,#4e6258 0%,#a3b39d 48%,#394d48 100%); background-size:cover; background-position:center; }.phone-shade { position:absolute; inset:0; background:#000; opacity:.32; }.phone-content { position:relative; padding:56px 19px 0; height:100%; color:var(--paper); }.lock-time { font:500 68px/.9 'DM Sans',sans-serif; letter-spacing:-.08em; text-align:center; }.lock-date { margin-top:10px; font:10px 'DM Mono',monospace; text-align:center; letter-spacing:.06em; }.calendar-card { position:absolute; left:18px; right:18px; bottom:44px; padding:17px 15px 12px; color:var(--ink); background:#10100ed9; backdrop-filter:blur(8px); border:1px solid #ffffff38; box-shadow:0 9px 30px #0004; }.card-header { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #ffffff3b; padding-bottom:12px; }.card-header span:first-child { font:500 14px 'Playfair Display',serif; }.card-title { font:9px 'DM Mono',monospace; color:#bab7ae; }.week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; padding:15px 0 18px; }.day { font:9px 'DM Mono',monospace; color:#aaa69d; }.day strong { display:block; padding-top:9px; color:var(--ink); font:500 15px 'DM Sans',sans-serif; }.day.today strong { display:grid; place-items:center; width:25px; height:25px; margin-top:3px; padding:0; border-radius:50%; background:var(--accent); color:#161613; }.agenda-list { border-top:1px solid #ffffff3b; padding-top:12px; }.agenda-item { display:flex; gap:9px; padding:6px 0; font-size:10px; }.agenda-time { width:35px; color:#aaa69d; font:9px 'DM Mono',monospace; }.agenda-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.agenda-bar { width:2px; background:var(--accent); }.card-footer { display:flex; align-items:center; gap:8px; margin-top:13px; color:#858179; font:8px 'DM Mono',monospace; }.footer-line { width:14px; height:1px; background:#858179; }.phone-home-indicator { position:absolute; bottom:11px; left:50%; width:92px; height:4px; transform:translateX(-50%); border-radius:99px; background:#fff9; }.preview-footer { display:flex; justify-content:space-between; padding-bottom:20px; }.preview-footer i { margin-right:7px; }
.shortcut-strip { display:grid; grid-template-columns:1fr 1fr auto; gap:50px; align-items:center; padding:58px 0; border-bottom:1px solid var(--line); }.shortcut-strip h2 { font:500 27px 'Playfair Display',serif; margin:9px 0 0; }.shortcut-strip p { color:#99958d; line-height:1.6; max-width:400px; }.text-link { color:var(--accent); font:11px 'DM Mono',monospace; text-decoration:none; white-space:nowrap; }code { color:var(--accent); font:11px 'DM Mono',monospace; }
.api-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:105px 0; }.api-section h2 { font-size:60px; }.code-card { align-self:center; background:#171614; border:1px solid #2f2c27; }.code-top { display:flex; justify-content:space-between; padding:13px 17px; border-bottom:1px solid #2f2c27; color:#7e7a73; font:10px 'DM Mono',monospace; }.code-card pre { padding:24px; margin:0; color:#bab9b0; font:12px/1.8 'DM Mono',monospace; white-space:pre-wrap; }.code-card pre .json-key { color:#e9b8a5; }.code-card pre .json-string { color:#d8e6b7; }footer { display:flex; justify-content:space-between; padding:24px 0 40px; }
 .accounts { display:flex; flex-direction:column; gap:7px; }.account-empty { padding:11px 12px; border:1px solid #2d2b28; color:#aaa69d; font-size:11px; line-height:1.45; }.account-empty span { color:#6f6b64; }.account { display:flex; align-items:center; gap:9px; padding:10px 11px; background:#1d1b18; border:1px solid #38342e; }.account-avatar { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--account-color,#d8e6b7); color:#161613; font-size:11px; font-weight:600; }.account-copy { flex:1; min-width:0; }.account-name,.account-email { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.account-name { color:#ded9cd; font-size:11px; }.account-email { color:#77736b; font:9px 'DM Mono',monospace; margin-top:3px; }.connect-google { display:flex; align-items:center; gap:8px; margin-top:10px; color:#b8b4aa; text-decoration:none; font:10px 'DM Mono',monospace; }.connect-google span:last-child { margin-left:auto; color:var(--accent); }.google-g { display:grid; place-items:center; width:18px; height:18px; border:1px solid #4b4740; border-radius:50%; color:#d8e6b7; font:600 11px Arial; }
@media (max-width: 900px) { .shell{padding:0 22px}.intro{display:block;padding:58px 0}.intro-copy{margin-top:28px}.workspace{display:block}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:35px 0}.preview-column{padding:35px 0 0}.shortcut-strip,.api-section{grid-template-columns:1fr;gap:22px;padding:60px 0}.api-section h2{font-size:50px}.shortcut-strip .text-link{justify-self:start} }