:root { color-scheme: light; --accent:#69529b; --on-accent:#fff; --completed:#e6dff1; --bg:#f2f2f7; --surface:#fff; --text:#25232b; --muted:#74717c; --line:#e5e3eb; --sidebar:#faf9fc; --hover:#f0ecf6; --shadow:0 16px 60px #30204012; --danger:#b53b46; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; }
:root[data-theme="dark"] { color-scheme:dark; --accent:#cfb9fa; --on-accent:#20162d; --completed:#332a46; --bg:#000; --surface:#1c1c1e; --text:#f5f2fa; --muted:#a5a0b1; --line:#343038; --sidebar:#141315; --hover:#2c2637; --shadow:0 16px 60px #0005; --danger:#ff9ba4; }
@media(prefers-color-scheme:dark) { :root[data-theme="system"] { color-scheme:dark; --accent:#cfb9fa; --on-accent:#20162d; --completed:#332a46; --bg:#000; --surface:#1c1c1e; --text:#f5f2fa; --muted:#a5a0b1; --line:#343038; --sidebar:#141315; --hover:#2c2637; --shadow:0 16px 60px #0005; --danger:#ff9ba4; } }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); color:var(--text); line-height:1.5; } button,input,textarea,select { font:inherit; } button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; color:inherit; } button:disabled { cursor:default; } a { color:var(--accent); } button,select { touch-action:manipulation; } svg { flex-shrink:0; vertical-align:middle; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } h1,h2,h3,p { margin:0; } h1,h2,h3 { line-height:1.18; } h1 { font-size:clamp(30px,3.2vw,40px); font-weight:650; letter-spacing:-1.25px; overflow-wrap:anywhere; } h2 { font-size:21px; font-weight:650; letter-spacing:-.4px; } h3 { font-size:18px; font-weight:600; } [hidden] { display:none!important; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:-70px; left:20px; z-index:20; padding:12px; background:var(--surface); } .skip-link:focus { top:10px; }
.app-shell { min-height:100dvh; display:grid; grid-template-columns:270px minmax(0,1fr); } .sidebar { background:var(--sidebar); border-right:1px solid var(--line); padding:34px 22px 24px; display:flex; flex-direction:column; gap:26px; position:sticky; top:0; height:100dvh; overflow:auto; } .brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-size:28px; font-weight:700; letter-spacing:-1.4px; margin:0 8px 28px; } .brand-dot { color:var(--accent); } .brand img { border-radius:11px; } .sidebar-heading { display:flex; align-items:center; justify-content:space-between; padding:0 6px 0 10px; margin-bottom:-14px; } .sidebar-heading h2 { font-size:14px; color:var(--muted); font-weight:500; letter-spacing:0; } .icon-button { display:inline-flex; align-items:center; justify-content:center; border:0; background:none; padding:10px; min-width:44px; min-height:44px; border-radius:12px; color:var(--accent); } .icon-button:hover { background:var(--hover); } .library { display:flex; flex-direction:column; gap:6px; } .library-item { border:0; background:none; text-align:left; padding:14px 13px; border-radius:16px; display:flex; align-items:center; gap:13px; width:100%; min-height:72px; } .library-item:hover { background:var(--hover); } .library-item.active { background:var(--completed); } .library-icon { color:var(--accent); } .library-copy { flex:1; min-width:0; } .library-title { display:block; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .library-count { display:block; font-size:12px; color:var(--muted); margin-top:3px; } .sidebar-action { display:flex; align-items:center; gap:11px; border:0; background:none; color:var(--accent); font-size:13px; padding:12px 14px; border-radius:12px; text-align:left; min-height:44px; margin-top:-12px; } .sidebar-action:hover { background:var(--hover); } .sidebar-bottom { margin-top:auto; padding:42px 10px 0; } .local-note { color:var(--muted); font-size:12px; line-height:1.7; margin-bottom:22px; } .preferences { display:flex; flex-direction:column; gap:7px; } .theme-label { color:var(--muted); font-size:12px; } .preferences select { background:var(--surface); border:1px solid var(--line); padding:10px; border-radius:10px; width:100%; min-height:44px; color:var(--text); font-size:12px; } .effects-switch { display:flex; align-items:center; gap:10px; margin-top:16px; min-height:44px; font-size:12px; color:var(--muted); cursor:pointer; } .effects-switch input { position:absolute; opacity:0; width:1px; height:1px; } .switch { position:relative; width:32px; height:20px; margin-left:auto; border-radius:20px; background:var(--line); } .switch:before { content:""; position:absolute; top:3px; left:3px; height:14px; width:14px; border-radius:50%; background:var(--surface); transition:transform .2s; } .effects-switch input:checked~.switch { background:var(--accent); } .effects-switch input:checked~.switch:before { transform:translateX(12px); } .effects-switch input:focus-visible~.switch { outline:3px solid var(--accent); outline-offset:3px; }
.workspace { min-width:0; display:flex; flex-direction:column; } .topbar { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:0 44px; padding:27px 0; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); } .web-badge { font-size:11px; letter-spacing:.2px; white-space:nowrap; } main { width:min(100%,800px); margin:0 auto; padding:52px 48px 40px; flex:1; outline:none; } .page-kicker { display:flex; align-items:center; gap:8px; color:var(--accent); font-size:12px; margin-bottom:24px; } .page-header { display:flex; align-items:flex-start; gap:20px; margin-bottom:21px; } .hero-icon { width:62px; height:62px; display:grid; place-items:center; border-radius:20px; background:var(--completed); color:var(--accent); flex-shrink:0; } .hero-copy { min-width:0; flex:1; } .page-description { color:var(--muted); font-size:14px; margin-top:8px; } .toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:0 0 25px; } .toolbar .spacer { flex:1; } .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:11px 16px; min-height:44px; background:var(--surface); font-size:13px; font-weight:500; text-decoration:none; color:var(--text); } .button:hover { background:var(--hover); } .button.primary { background:var(--accent); color:var(--on-accent); border-color:var(--accent); } .button.primary:hover { filter:brightness(1.07); } .button.danger { color:var(--danger); } .button:disabled { opacity:.5; } .text-button { background:none; border:0; color:var(--accent); font-size:12px; padding:10px 0; min-height:44px; text-align:left; } .progress-area { margin:1px 0 30px; } .progress-copy { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); margin-bottom:10px; } .progress-copy strong { color:var(--accent); font-size:12px; font-weight:500; } .progress-track { height:5px; background:var(--line); border-radius:5px; overflow:hidden; } .progress-fill { height:100%; background:var(--accent); border-radius:5px; transition:width .25s; } .mode-label { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--muted); }
.board { display:flex; flex-direction:column; gap:5px; } .section-heading { margin:22px 0 9px; font-size:16px; letter-spacing:-.25px; line-height:1.35; overflow-wrap:anywhere; } .section-heading.first { margin-top:0; } .tile-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } .tile-row.single { grid-template-columns:1fr; } .tile { position:relative; display:flex; flex-direction:column; align-items:stretch; padding:18px; text-align:left; border:1px solid transparent; border-radius:23px 8px 23px 8px; background:var(--surface); min-height:118px; overflow:hidden; transition:background .18s,transform .18s; } .tile.odd { border-top-left-radius:8px; } .tile.done { background:var(--completed); } .tile.next { border-color:color-mix(in srgb,var(--accent) 50%,transparent); } .tile.locked { opacity:.65; } .tile:not(.locked):hover { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent); } .tile-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; margin-bottom:12px; color:var(--muted); font-size:11px; } .tile-top .check { color:var(--accent); } .tile-top .step-next { color:var(--accent); } .tile-title { font-size:16px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; } .tile-quantity { color:var(--muted); font-size:13px; margin-top:6px; overflow-wrap:anywhere; } .tile-note { font-size:12px; line-height:1.5; color:var(--muted); margin-top:9px; white-space:pre-wrap; overflow-wrap:anywhere; } .tile-number { font-size:11px; opacity:.6; } .empty-check { width:19px; height:19px; border:1px solid var(--line); border-radius:50%; } .done .empty-check { border-color:var(--accent); } .tile-pop { animation:pop .24s ease-out; } .celebrating .tile:after { content:""; position:absolute; inset:-40%; background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--accent) 16%,transparent) 48%,transparent 65%); animation:shine .9s ease-out both; pointer-events:none; } .completion { text-align:center; margin:24px 0 0; color:var(--accent); } .completion h2 { margin:8px 0; font-size:22px; } .completion p { font-size:13px; color:var(--muted); } .completion .button { margin-top:16px; } .list-note { color:var(--muted); font-size:12px; margin-top:23px; display:flex; align-items:flex-start; gap:8px; } .list-note svg { margin-top:2px; } .shared-banner { background:var(--completed); padding:16px 18px; border-radius:16px; font-size:13px; margin-bottom:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .shared-banner p { flex:1; min-width:180px; } .shared-banner strong { display:block; margin-bottom:3px; font-weight:600; } .shared-banner span { color:var(--muted); font-size:12px; } .workspace-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin:0 44px; padding:15px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; } .workspace-footer .text-button { font-size:11px; }
.empty-state { text-align:center; padding:70px 20px; } .empty-state .hero-icon { margin:0 auto 24px; } .empty-state p { color:var(--muted); margin:14px 0 24px; font-size:14px; } .empty-state .button { margin:5px; } .storage-warning { margin:18px 44px 0; padding:12px 16px; font-size:12px; background:var(--completed); color:var(--text); border-radius:12px; } .toast { position:fixed; bottom:25px; left:50%; transform:translateX(-50%); padding:12px 20px; max-width:calc(100vw - 32px); border-radius:14px; background:var(--text); color:var(--bg); box-shadow:var(--shadow); z-index:40; font-size:13px; text-align:center; } .error { color:var(--danger); font-size:13px; line-height:1.5; padding:10px 0; } .noscript { position:fixed; inset:auto 20px 20px; background:var(--surface); padding:20px; border:1px solid var(--line); }
dialog { border:1px solid var(--line); background:var(--bg); color:var(--text); border-radius:24px; padding:0; width:min(570px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); box-shadow:var(--shadow); } dialog.editor-dialog { width:min(750px,calc(100vw - 32px)); } dialog::backdrop { background:#15101e70; backdrop-filter:blur(5px); } .modal-inner { padding:28px; } .modal-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-7px -9px 19px 0; } .modal-header h2 { font-size:23px; } .modal-description { color:var(--muted); font-size:13px; margin:0 0 22px; line-height:1.65; } .modal-section { background:var(--surface); border-radius:15px; padding:18px; margin-top:16px; } .modal-section h3 { font-size:15px; margin-bottom:10px; } .modal-section p { font-size:13px; color:var(--muted); line-height:1.65; } .modal-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .field { display:flex; flex-direction:column; gap:7px; margin-bottom:17px; } .field label,.field-label { font-size:12px; color:var(--muted); } .field input,.field textarea,.field select,.row-fields input,.row-fields textarea { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:10px; padding:11px 12px; min-height:44px; font-size:14px; } textarea { resize:vertical; } .field textarea { min-height:100px; } .link-field { font-size:11px!important; overflow-wrap:anywhere; min-height:100px; } .helper { color:var(--muted); font-size:12px; line-height:1.6; margin-top:10px; } .icon-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:8px 0 21px; } .icon-choice { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 2px; border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:12px; min-height:68px; font-size:9px; } .icon-choice[aria-pressed="true"] { border-color:var(--accent); background:var(--completed); color:var(--accent); } .editor-heading { display:flex; align-items:center; justify-content:space-between; margin:28px 0 13px; } .editor-heading h3 { font-size:16px; } .editor-heading span { color:var(--muted); font-size:12px; } .edit-rows { display:flex; flex-direction:column; gap:9px; } .edit-row { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px; display:flex; gap:9px; align-items:flex-start; } .edit-row.section-row { background:var(--completed); } .row-fields { flex:1; min-width:0; } .row-fields input,.row-fields textarea { background:transparent; border-color:var(--line); font-size:13px; } .row-fields label { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; } .row-fields .text-input { border:0; padding:5px 0; border-radius:0; font-size:15px; min-height:32px; } .section-row .text-input { font-weight:600; } .row-fields details { margin-top:6px; } .row-fields summary { font-size:11px; color:var(--accent); cursor:pointer; padding:8px 0; min-height:36px; } .row-fields .details-fields { display:grid; grid-template-columns:100px minmax(0,1fr); gap:9px; padding-top:7px; } .row-fields .details-fields textarea { min-height:68px; } .row-controls { display:flex; flex-direction:column; } .row-controls .icon-button { padding:8px; min-height:44px; min-width:44px; } .row-controls .icon-button:disabled { opacity:.25; } .add-rows { display:flex; flex-wrap:wrap; gap:9px; margin-top:13px; } .sticky-actions { position:sticky; bottom:-28px; background:var(--bg); padding:18px 0 10px; margin-bottom:-10px; border-top:1px solid var(--line); } .check-explainer { display:flex; align-items:flex-start; gap:10px; } .check-explainer svg { margin-top:3px; color:var(--accent); } .muted { color:var(--muted); } .share-meta { color:var(--muted); font-size:11px; margin-top:7px; } .code-field { font-family:ui-monospace,monospace!important; font-size:11px!important; }
@keyframes pop { 50% { transform:scale(.985); } } @keyframes shine { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media(min-width:1500px) { .app-shell { grid-template-columns:300px minmax(0,1fr); } main { padding-top:65px; } .sidebar { padding-left:30px; padding-right:30px; } }
@media(max-width:1000px) { .app-shell { grid-template-columns:225px minmax(0,1fr); } .sidebar { padding-left:14px; padding-right:14px; } main { padding:38px 28px; } .topbar,.workspace-footer { margin-left:28px; margin-right:28px; } .topbar-label { max-width:160px; } }
@media(max-width:700px) { .app-shell { display:block; } .sidebar { position:static; height:auto; padding:20px 20px 12px; gap:12px; border-right:0; border-bottom:1px solid var(--line); overflow:visible; } .brand { font-size:25px; margin:0; } .brand img { width:30px; height:30px; } .sidebar-heading { position:absolute; top:16px; right:15px; margin:0; } .sidebar-heading h2 { display:none; } .library { flex-direction:row; overflow:auto; padding:4px 0; gap:7px; } .library-item { flex-shrink:0; width:auto; max-width:230px; padding:11px 13px; min-height:63px; gap:9px; border:1px solid var(--line); } .library-title { font-size:12px; } .library-count { font-size:10px; } .library-icon svg { width:20px; } .sidebar-action { position:absolute; top:17px; right:63px; margin:0; font-size:0; padding:10px; } .sidebar-action svg { width:21px; } .sidebar-bottom { padding:0; display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .local-note,.theme-label { display:none; } .preferences { flex-direction:row; } .preferences select { border:0; background:none; padding:6px 0; font-size:11px; min-height:32px; } .effects-switch { margin:0 0 0 auto; font-size:11px; min-height:36px; } .topbar { display:none; } main { padding:28px 20px 32px; } h1 { font-size:30px; letter-spacing:-.9px; } .page-kicker { margin-bottom:18px; } .page-header { gap:14px; margin-bottom:22px; } .hero-icon { width:52px; height:52px; border-radius:17px; } .hero-icon svg { width:28px; height:28px; } .page-description { font-size:12px; margin-top:6px; } .toolbar { gap:6px; padding-bottom:22px; } .button { padding:10px 12px; font-size:12px; } .toolbar .spacer { display:none; } .progress-area { margin-bottom:24px; } .tile { min-height:118px; padding:18px; } .tile-title { font-size:15px; } .workspace-footer { margin:0 20px; padding:10px 0; font-size:10px; } .workspace-footer .text-button { font-size:10px; } .storage-warning { margin:15px 20px 0; } .modal-inner { padding:22px; } .modal-header h2 { font-size:21px; } .icon-grid { grid-template-columns:repeat(4,1fr); } .sticky-actions { bottom:-22px; } .row-fields .details-fields { grid-template-columns:1fr; } .shared-banner { padding:14px; } .shared-banner .button { width:100%; } }
@media(max-width:370px) { .tile-row { grid-template-columns:1fr; } main { padding-left:15px; padding-right:15px; } .effects-switch { margin-left:0; } .page-header .hero-icon { display:none; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
:root[data-effects="off"] *, :root[data-effects="off"] *:before, :root[data-effects="off"] *:after { animation:none!important; transition:none!important; }