body.app{background:var(--bg);color:var(--tx)}.app-top{height:64px;max-width:var(--maxw);align-items:center;gap:16px;margin:0 auto;padding:0 16px;display:flex}.app-top .logo{font-family:var(--font-display);letter-spacing:-.01em;align-items:center;gap:10px;font-size:18px;font-weight:800;text-decoration:none;display:flex}.app-top .logo i{border-radius:8px;grid-template-columns:1fr 1fr 1fr;width:30px;height:30px;display:inline-grid;overflow:hidden}.app-top .logo i b{display:block}.app-top .studio-name{color:var(--tx2);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.app-top .logout{margin-left:auto}.app-grid{max-width:var(--maxw);gap:24px;margin:0 auto;padding:0 16px 96px;display:grid}.app-nav{background:var(--bg);border-top:2px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:10;scrollbar-width:none;gap:4px;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-x:auto}.app-nav a{border-radius:999px;flex:none;align-items:center;min-height:44px;padding:10px 12px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.app-nav a[aria-current=page]{background:var(--tx);color:var(--bg)}.app-main{align-content:start;gap:24px;min-width:0;display:grid}.app-main>*,.form>*,.cards>*,.card>*,.row2>*{min-width:0}@media (width>=1024px){.app-grid{grid-template-columns:200px 1fr;gap:40px;padding-bottom:48px}.app-nav{background:0 0;border:0;align-content:start;gap:2px;padding:8px 0;display:grid;position:static}.app-nav a{border-radius:999px;padding:8px 12px;font-size:15px}}body.narrow .app-grid{grid-template-columns:1fr;max-width:480px}.page-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;display:flex}.page-head h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2.125rem)}.page-head .sub{color:var(--tx2);font-size:14px}.dash{border-radius:var(--r-lg);background:var(--zs-black);color:var(--zs-white);--focus:var(--zs-white);gap:18px;padding:20px;display:grid}@media (width>=900px){.dash{padding:28px}}.dash .dhead{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.dash .dhead .d{font-size:clamp(22px,3vw,34px)}.dash .dhead .num{color:#a8a8a8;font-size:14px}.blocks{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;display:grid}.chip{min-height:118px;color:var(--zs-black);border-radius:12px;grid-template-rows:auto 1fr auto;padding:12px;text-decoration:none;display:grid}.chip .t{font-family:var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.chip .w2{align-self:end;font-size:13px;font-weight:600;line-height:1.3}.chip .s{text-transform:uppercase;letter-spacing:.08em;opacity:.7;font-size:11px;font-weight:600}.chip.free{color:#8d8d8d;background:0 0;border:2px dashed #3a3a3a}.chip.pause{background:var(--zs-grey-dark);color:#9a9a9a}.chip.off{color:#bdbdbd;background:#3a3a3a}.chip.off .t{text-decoration:line-through}.chip.neutral{background:var(--zs-grey-soft)}a.chip:hover,a.chip:focus-visible{outline:3px solid var(--zs-white);outline-offset:2px}.form{gap:16px;max-width:560px;display:grid}.form .row2{grid-template-columns:1fr 1fr;gap:16px;display:grid}.form .actions{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.cards{gap:12px;display:grid}.card{border:2px solid var(--line);border-radius:var(--r-lg);gap:8px;padding:16px 18px;display:grid}.card h3{font-size:16px}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:10px;place-items:center;width:44px;height:44px;display:inline-grid}.swatch input{opacity:0;width:1px;height:1px;position:absolute}.swatch:has(input:checked){border-color:var(--line);outline:3px solid var(--line);outline-offset:2px}.swatch:has(input:focus-visible){outline:3px solid var(--line);outline-offset:2px}code.snippet,pre.snippet{background:var(--zs-grey-soft);color:var(--zs-black);border-radius:var(--r-md);font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;padding:12px 14px;font-size:13px;display:block;overflow-x:auto}@media (prefers-color-scheme:dark){code.snippet,pre.snippet{background:var(--zs-grey-dark);color:var(--zs-white)}}
