/* eqlly — the product UI (app/*). Loads after base.css.
Deliberately quieter than the marketing site: this is a room you work in, not
a page that sells to you. The vermilion is kept for state and action only. */
body{background:var(--app-bg)}
/* re-resolve text colour on the shell so descendants without an explicit colour
pick up the themed --ink (base.css sets it on , above .app-shell, where
the dark token override can't reach). No change in light: same value. */
.app-shell{min-height:100vh;display:flex;flex-direction:column;color:var(--ink)}
/* Theming layer — all app-chrome colours resolve through these tokens so the
whole product UI can flip to dark by overriding the token set alone (see the
dark block at the foot of this file). Light values here are identical to the
literals they replaced: light rendering is unchanged. Scoped to .app-shell so
only the product pages (index/settings) theme — the marketing/legal pages
that share base.css never carry .app-shell and are untouched.
--app-bg is on :root because sits above .app-shell. */
:root{--app-bg:#F7F6F3}
.app-shell{
--sb-bg:#F4F1EA;
--surface:#fff;
--surface-hover:#fdfcfa;
--canvas:#F3F1EC;
--hover:rgba(22,23,27,.05);
--hover-2:rgba(22,23,27,.07);
--hover-3:rgba(22,23,27,.08);
--tx:rgba(22,23,27,.86);
--tx-sb:rgba(22,23,27,.78);
--placeholder:rgba(22,23,27,.38);
--dots:rgba(22,23,27,.3);
--ava-bg:var(--paper-2); /* brand-mark chip (holds the ink favicon) */
--chip-bg:var(--ink); /* account avatar */
--chip-fg:#fff;
--send-bg:var(--ink);
--send-fg:#fff;
--send-bg-hover:#000;
--send-off:rgba(22,23,27,.14);
--pri-bg:var(--ink); /* canvas 公開する */
--pri-fg:#fff;
--online:#3E9E6B;
--online-soft:rgba(62,158,107,.14);
--accent-soft:rgba(217,72,43,.38);
--accent-glow:rgba(217,72,43,.16);
--danger-hover:#FFF4F1;
--sw-off:rgba(22,23,27,.18);
--composer-fade:#fff;
--composer-border-focus:rgba(22,23,27,.32);
--shadow-1:0 1px 3px rgba(22,23,27,.05);
--shadow-2:0 4px 12px rgba(22,23,27,.09);
--shadow-composer:0 3px 14px rgba(22,23,27,.05);
--shadow-composer-focus:0 6px 22px rgba(22,23,27,.09);
--menu-shadow:0 16px 40px rgba(22,23,27,.14);
--paper-shadow:0 18px 50px rgba(22,23,27,.1);
--mk-filter:none;
--logo-light:block;
--logo-dark:none;
}
.sb-brand .logo-light{display:var(--logo-light)}
.sb-brand .logo-dark{display:var(--logo-dark)}
/* ---- sidebar (chat page): sidebar | main-column, like ChatGPT/Claude/Gemini ---- */
.app-shell.has-sb{flex-direction:row;height:100vh}
.app-shell.has-sb .main{flex:1;display:flex;flex-direction:column;min-width:0}
.sb{width:266px;flex:none;background:var(--sb-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.sb-top{padding:14px 12px 8px;display:flex;flex-direction:column;gap:13px}
.sb-brand{display:flex;align-items:center;gap:9px;padding:4px 8px}
.sb-brand img{height:22px;width:auto;display:block}
.sb-new{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:12px;
border:1px solid var(--line);background:var(--surface);font-family:var(--jp);font-size:13.5px;font-weight:600;color:var(--ink);
cursor:pointer;box-shadow:var(--shadow-1);transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.sb-new:hover{background:var(--surface-hover);box-shadow:var(--shadow-2)}
.sb-new span{font-size:17px;line-height:0;margin-top:-2px}
.sb-list{flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:1px}
.sb-label{font-size:10.5px;letter-spacing:.06em;color:var(--sub);padding:12px 10px 6px;font-weight:600}
.sb-item{display:block;padding:9px 11px;border-radius:9px;font-size:13px;color:var(--tx-sb);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s var(--ease)}
.sb-item:hover{background:var(--hover);color:var(--ink)}
.sb-item.on{background:var(--hover-3);color:var(--ink);font-weight:600}
.sb-foot{border-top:1px solid var(--line-soft);padding:8px}
.sb-acct{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:10px;
font-size:13px;color:var(--ink);transition:background .15s var(--ease)}
.sb-acct:hover{background:var(--hover)}
.sb-acct.on{background:var(--hover-2);font-weight:600}
.sb-acct .av{width:28px;height:28px;flex:none;border-radius:50%;background:var(--chip-bg);color:var(--chip-fg);
display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:12px;font-weight:600}
/* ---- mobile drawer (sidebar becomes an off-canvas panel ≤900px) ---- */
/* hamburger + backdrop are inert on desktop: hidden here, revealed in the
≤900px block where .sb turns into a slide-in drawer. */
.ah-burger{display:none;width:44px;height:44px;flex:none;margin-left:-10px;border:none;background:none;
cursor:pointer;border-radius:10px;color:var(--ink);align-items:center;justify-content:center;
transition:background .15s var(--ease)}
.ah-burger:hover{background:var(--hover)}
.ah-burger svg{width:22px;height:22px;display:block}
.sb-backdrop{display:none;position:fixed;inset:0;z-index:80;background:rgba(13,14,18,.44);
opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)}
.sb-backdrop.on{opacity:1;visibility:visible}
body.sb-lock{overflow:hidden}
/* ---- app header ---- */
.ah{height:56px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
display:flex;align-items:center;gap:18px;padding:0 20px}
.ah .brand .wordmark{font-size:19px}
.ah-div{width:1px;height:20px;background:var(--line)}
.ah-ver{font-family:var(--mono);font-size:9.5px;color:var(--sub);border:1px solid var(--line);border-radius:5px;padding:1px 6px;letter-spacing:.04em}
.ah-proj{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}
.ah-proj .dot{width:7px;height:7px;border-radius:50%;background:var(--online)}
.ah-right{margin-left:auto;display:flex;align-items:center;gap:16px}
/* token meter: the thing the pricing page promises you can always see */
.ah-tok{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--sub)}
.ah-tok .bar{width:92px;height:5px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.ah-tok .bar i{display:block;height:100%;background:var(--accent);border-radius:3px}
.ah-tok b{font-family:var(--en);font-weight:600;color:var(--ink);font-size:12.5px}
.ah-acct{position:relative}
.ah-avatar{width:31px;height:31px;border-radius:50%;background:var(--chip-bg);color:var(--chip-fg);border:none;cursor:pointer;
font-family:var(--en);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.ah-menu{position:absolute;right:0;top:40px;width:216px;background:var(--surface);border:1px solid var(--line);
border-radius:10px;box-shadow:var(--menu-shadow);padding:6px;
opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
.ah-menu.on{opacity:1;visibility:visible;transform:none}
.ah-menu a,.ah-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;
padding:9px 11px;border-radius:6px;font-size:13px;color:var(--ink);background:none;border:none;
cursor:pointer;font-family:var(--jp);text-align:left}
.ah-menu a:hover,.ah-menu button:hover{background:var(--paper-2)}
.ah-menu .sep{height:1px;background:var(--line-soft);margin:5px 0}
.ah-menu .mail{padding:9px 11px;font-size:11.5px;color:var(--sub);word-break:break-all}
/* ---- settings ---- */
/* when settings sits inside the sidebar shell, the header stays put and only
this wrapper scrolls — matching the chat page's main column. */
.set-scroll{flex:1;overflow-y:auto;min-height:0}
.set{max-width:820px;margin:0 auto;padding:44px 28px 90px;width:100%}
.set-head h1{font-size:28px;font-weight:700;margin-bottom:6px}
.set-head p{font-size:13.5px;color:var(--sub);margin-bottom:34px}
.set-nav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:34px;overflow-x:auto}
.set-nav a{font-size:13.5px;font-weight:500;color:var(--sub);padding:11px 14px;white-space:nowrap;
border-bottom:2px solid transparent;margin-bottom:-1px}
.set-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin-bottom:18px}
.card h2{font-size:16px;font-weight:700;margin-bottom:6px;scroll-margin-top:80px}
.card > p{font-size:13.5px;line-height:1.95;color:var(--sub);margin-bottom:0}
.card .rows{margin-top:20px;border-top:1px solid var(--line-soft)}
.row{display:flex;align-items:flex-start;gap:22px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.row:last-child{border-bottom:none;padding-bottom:0}
.row .rt{flex:1}
.row h3{font-size:14px;font-weight:700;margin-bottom:4px}
.row p{font-size:12.5px;line-height:1.9;color:var(--sub)}
.row .act{flex:none;padding-top:2px}
/* switch — the opt-out control the privacy policy points at */
.sw{position:relative;width:46px;height:26px;flex:none;border:none;padding:0;cursor:pointer;
border-radius:100px;background:var(--sw-off);transition:background .25s var(--ease)}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;
box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .25s var(--spring)}
.sw[aria-checked="true"]{background:var(--online)}
.sw[aria-checked="true"]::after{transform:translateX(20px)}
.sw:disabled{opacity:.45;cursor:not-allowed}
.sw-state{font-size:11.5px;color:var(--sub);text-align:center;margin-top:6px;font-family:var(--en);letter-spacing:.06em}
.btn{font-family:var(--jp);font-size:13px;font-weight:600;padding:9px 16px;border-radius:7px;cursor:pointer;
border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:background .25s var(--ease)}
.btn:hover{background:var(--paper-2)}
.btn-danger{border-color:rgba(217,72,43,.4);color:var(--accent)}
.btn-danger:hover{background:var(--danger-hover)}
.note{background:var(--paper-2);border-radius:8px;padding:13px 16px;margin-top:18px;
font-size:12.5px;line-height:1.9;color:var(--sub)}
.note a{border-bottom:1px solid var(--line)}
.plan-now{display:flex;align-items:baseline;gap:12px;margin-top:4px}
.plan-now b{font-size:19px;font-weight:700}
.plan-now span{font-family:var(--en);font-size:13px;color:var(--sub)}
.saved{font-size:12px;color:var(--online);opacity:0;transition:opacity .3s var(--ease)}
.saved.on{opacity:1}
/* ---- chat / build workspace — eqlly 1.0 ---- */
/* default: single column — the chat is the star (Claude/Gemini feel). */
/* two tracks from the start (preview collapsed to 0fr) so the split can be
animated: grid-template-columns interpolates fr↔fr when the track count is
stable. */
.ws{flex:1;display:grid;grid-template-columns:1fr 0fr;min-height:0;
transition:grid-template-columns .55s var(--ease)}
/* building: the collapsed track opens and it becomes a split. */
.ws.building{grid-template-columns:.94fr 1.06fr}
.chat,.canvasw{min-width:0}
.chat{background:var(--surface);display:flex;flex-direction:column;min-height:0}
.ws.building .chat{border-right:1px solid var(--line)}
/* centre the conversation while single-column; let it fill the panel once building */
.chat-top,.log,.composer{width:100%;max-width:760px;margin-left:auto;margin-right:auto}
.ws:not(.building) .chat-top{border-bottom:none;padding-top:22px}
.ws.building .chat-top,.ws.building .log,.ws.building .composer{max-width:none}
.chat-top{padding:15px 24px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px}
.chat-top .ava{width:36px;height:36px;border-radius:50%;flex:none;background:var(--ava-bg);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.chat-top .ava img{width:25px;height:25px}
.chat-top .who{font-size:14px;font-weight:700}
.chat-top .ph{font-size:11.5px;color:var(--sub);margin-top:1px}
.chat-top .badge{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--sub)}
.chat-top .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--online);box-shadow:0 0 0 3px rgba(62,158,107,.16)}
.log{flex:1;overflow-y:auto;padding:30px 24px 12px;display:flex;flex-direction:column;gap:26px;scroll-behavior:smooth}
.m{font-size:15px;line-height:1.78;animation:mIn .4s var(--ease) both}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.m.eq{display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:start}
.m.eq .av{width:30px;height:30px;border-radius:50%;flex:none;margin-top:1px;background:var(--ava-bg);border:1px solid var(--line);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.m.eq .av img{width:21px;height:21px}
.m.eq .nm{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px}
.m.eq .tx{color:var(--tx)}
.m.me{align-self:flex-end;max-width:80%;background:var(--paper-3);color:var(--ink);padding:12px 17px;
border-radius:18px;border-bottom-right-radius:6px}
.m.eq.typing .tx{display:inline-flex;gap:5px;padding:7px 0}
.m.eq.typing .tx i{width:7px;height:7px;border-radius:50%;background:var(--dots);animation:blink 1.3s infinite}
.m.eq.typing .tx i:nth-child(2){animation-delay:.18s}
.m.eq.typing .tx i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.composer{padding:14px 22px 20px;background:linear-gradient(to top,var(--composer-fade) 72%,transparent)}
.composer .box{border:1px solid var(--line);border-radius:18px;padding:7px 7px 7px 18px;display:flex;gap:10px;align-items:flex-end;
background:var(--surface);box-shadow:var(--shadow-composer);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.composer .box:focus-within{border-color:var(--composer-border-focus);box-shadow:var(--shadow-composer-focus)}
.composer textarea{flex:1;border:none;outline:none;resize:none;font-family:var(--jp);font-size:15px;line-height:1.7;
max-height:140px;background:none;color:var(--ink);padding:8px 0}
.composer textarea::placeholder{color:var(--placeholder)}
.composer .send{width:38px;height:38px;flex:none;border-radius:13px;background:var(--send-bg);color:var(--send-fg);border:none;cursor:pointer;
font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),transform .15s var(--spring)}
.composer .send:not(:disabled):hover{background:var(--send-bg-hover);transform:translateY(-1px)}
.composer .send:disabled{background:var(--send-off);cursor:not-allowed}
.composer .hint{display:flex;align-items:center;gap:8px;margin-top:11px;padding:0 6px;font-size:11.5px;color:var(--sub)}
.composer .hint a{border-bottom:1px solid var(--line)}
.composer .hint .off{color:var(--online);font-weight:600}
/* overflow:hidden so the panel's contents stay clipped while the track is
still narrow during the open animation. */
.canvasw{background:var(--canvas);display:none;flex-direction:column;min-height:0;overflow:hidden}
.ws.building .canvasw{display:flex;animation:fadeIn .6s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.canvas-bar{height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
padding:0 14px;background:var(--surface)}
.canvas-bar .dots{display:flex;gap:5px}
.canvas-bar .dots i{width:9px;height:9px;border-radius:50%;background:rgba(22,23,27,.14)}
.canvas-bar .addr{font-family:var(--mono);font-size:10.5px;color:var(--sub);background:var(--paper-2);
border-radius:5px;padding:3px 12px;flex:1;text-align:center;max-width:340px;margin:0 auto}
.canvas-bar .acts{display:flex;gap:8px}
.canvas-bar .acts button{font-family:var(--jp);font-size:12px;padding:6px 12px;border-radius:6px;
border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink)}
.canvas-bar .acts .pri{background:var(--pri-bg);color:var(--pri-fg);border-color:var(--pri-bg)}
.stage{flex:1;overflow:auto;padding:26px;display:flex;justify-content:center;align-items:center}
/* the preview paper is the rendered site, not app chrome — it stays a light
sheet even in dark, like a document on a dark desk. */
.paper{width:100%;max-width:1100px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
box-shadow:var(--paper-shadow)}
.paper img{width:100%;height:auto;display:block}
.empty{text-align:center;color:var(--sub);font-size:13.5px;line-height:1.9;max-width:300px}
.empty .mk{width:46px;height:46px;opacity:.2;margin:0 auto 16px;display:block;filter:var(--mk-filter)}
/* ---- build 実況 : the studio pipeline played out in the preview pane after the
hearing. Order & the 12-point gate are the ones the studio actually ships
with (受付 迎Mukae → 統括 統Sube → 担当デザイナー1パス → 検証 目利きMekiki).
The paper stays a white sheet (a document on the desk); the status panel is
themed chrome. --accent = in progress, --online = passed. */
.stage.run{align-items:flex-start;justify-content:center}
.build{display:none;flex-direction:column;width:100%;max-width:760px;gap:18px;padding:2px 0 10px}
.build.show{display:flex}
/* the preview sheet, raised wire → blocks → finish */
.build-paper{max-width:none;padding:0;--pk:rgba(22,23,27,.09);--pk-hi:rgba(22,23,27,.04);--pk2:rgba(22,23,27,.17)}
.build-paper > *{padding:0 18px}
.bp-nav{height:46px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(22,23,27,.07)}
.bp-nav .bp-mk{width:26px;height:14px;border-radius:4px}
.bp-nav .bp-link{width:38px;height:8px;border-radius:4px}
.bp-nav .bp-cta{width:62px;height:20px;border-radius:6px;margin-left:auto}
.bp-hero{position:relative;display:grid;grid-template-columns:1fr .92fr;gap:16px;padding-top:22px;padding-bottom:22px}
.bp-hero .bp-copy{display:flex;flex-direction:column;gap:11px;justify-content:center}
.bp-hero .bp-kick{width:96px;height:9px;border-radius:4px}
.bp-hero .bp-h1{width:100%;height:22px;border-radius:5px}
.bp-hero .bp-h1.w2{width:62%}
.bp-hero .bp-lead{width:100%;height:9px;border-radius:4px}
.bp-hero .bp-lead.w3{width:78%}
.bp-hero .bp-media{border-radius:8px;min-height:152px;align-self:stretch}
.bp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:20px;padding-bottom:22px}
.bp-grid i{height:66px;border-radius:8px}
.bp-foot{height:66px;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(22,23,27,.07)}
.bp-foot .bp-fmk{width:122px;height:12px;border-radius:5px}
/* bar base — every skeleton fill moves through the three stages */
.build-paper .bp-mk,.build-paper .bp-link,.build-paper .bp-cta,
.build-paper .bp-kick,.build-paper .bp-h1,.build-paper .bp-lead,
.build-paper .bp-media,.build-paper .bp-grid i,.build-paper .bp-fmk{
background:var(--pk);opacity:0;transition:opacity .5s var(--ease),background .6s var(--ease)}
/* ワイヤー — outlines only */
.build-paper.s-wire .bp-mk,.build-paper.s-wire .bp-link,.build-paper.s-wire .bp-cta,
.build-paper.s-wire .bp-kick,.build-paper.s-wire .bp-h1,.build-paper.s-wire .bp-lead,
.build-paper.s-wire .bp-media,.build-paper.s-wire .bp-grid i,.build-paper.s-wire .bp-fmk{
opacity:.5;background:transparent;box-shadow:inset 0 0 0 1px rgba(22,23,27,.14)}
/* ブロック — filled and shimmering while the designer works */
.build-paper.s-blocks .bp-mk,.build-paper.s-blocks .bp-link,.build-paper.s-blocks .bp-cta,
.build-paper.s-blocks .bp-kick,.build-paper.s-blocks .bp-h1,.build-paper.s-blocks .bp-lead,
.build-paper.s-blocks .bp-media,.build-paper.s-blocks .bp-grid i,.build-paper.s-blocks .bp-fmk{
opacity:1;box-shadow:none;
background:linear-gradient(90deg,var(--pk) 25%,var(--pk-hi) 45%,var(--pk) 62%);
background-size:280% 100%;animation:pshimmer 1.5s linear infinite}
@keyframes pshimmer{from{background-position:180% 0}to{background-position:-80% 0}}
/* 仕上げ — colour and type land, shimmer stops */
.build-paper.s-finish .bp-mk,.build-paper.s-finish .bp-link,.build-paper.s-finish .bp-cta,
.build-paper.s-finish .bp-kick,.build-paper.s-finish .bp-h1,.build-paper.s-finish .bp-lead,
.build-paper.s-finish .bp-media,.build-paper.s-finish .bp-grid i,.build-paper.s-finish .bp-fmk{
animation:none;background:var(--pk)}
.build-paper.s-finish .bp-h1{background:var(--pk2)}
.build-paper.s-finish .bp-media{background:linear-gradient(150deg,#E7C7BC,#D9482B 62%,#8F2F1A)}
.build-paper.s-finish .bp-mk,.build-paper.s-finish .bp-cta{background:var(--accent)}
.build-paper.s-finish .bp-fmk{background:var(--pk2)}
/* status panel (themed chrome) */
.bpanel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow-1)}
.bpanel-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.bpanel-head .bp-title{font-size:12.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:9px}
.bpanel-head .bp-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:bpulse 1.5s ease-in-out infinite}
.build.done .bpanel-head .bp-title::before{background:var(--online);box-shadow:0 0 0 4px var(--online-soft);animation:none}
.bpanel-head .bp-timer{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--sub)}
@keyframes bpulse{0%,100%{box-shadow:0 0 0 3px var(--accent-glow)}50%{box-shadow:0 0 0 6px transparent}}
.bsteps{list-style:none;display:flex;flex-direction:column;gap:2px}
.bsteps li{display:flex;align-items:flex-start;gap:11px;padding:9px 4px;opacity:.5;transition:opacity .45s var(--ease)}
.bsteps li.active,.bsteps li.done{opacity:1}
.bs-ico{width:18px;height:18px;flex:none;margin-top:1px;border-radius:50%;position:relative;border:1.7px solid var(--line);box-sizing:border-box}
.bsteps li.active .bs-ico{border-color:var(--accent-soft);border-top-color:var(--accent);animation:spin .8s linear infinite}
.bsteps li.done .bs-ico{border:none;background:var(--online-soft);animation:none}
.bsteps li.done .bs-ico::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--online)}
.bs-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bs-tx b{font-size:12.5px;font-weight:700;color:var(--ink)}
.bs-note{font-size:11.5px;color:var(--sub);line-height:1.7}
.bs-tm{font-family:var(--mono);font-size:10px;color:var(--online);flex:none;margin-top:2px;opacity:0;transition:opacity .4s var(--ease)}
.bsteps li.done .bs-tm{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
/* DoD — the studio's real 12-point shipping gate, lit one by one */
.bdod{display:none;margin-top:13px;border-top:1px solid var(--line-soft);padding-top:13px}
.bdod.show{display:block}
.bdod > b{display:block;font-family:var(--en);font-size:10px;letter-spacing:.08em;color:var(--sub);font-weight:600;margin-bottom:11px}
.bdod ol{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.bdod li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx);opacity:0;transform:translateY(3px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.bdod li.ok{opacity:1;transform:none}
.bdod li i{width:13px;height:13px;flex:none;border-radius:50%;background:var(--online-soft);position:relative}
.bdod li.ok i::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--online)}
@media (max-width:900px){
/* sidebar → off-canvas drawer, opened by the header hamburger */
.sb{position:fixed;top:0;left:0;bottom:0;z-index:90;width:min(300px,86vw);
transform:translateX(-100%);transition:transform .32s var(--ease)}
.sb.open{transform:none;box-shadow:0 20px 60px rgba(13,14,18,.28)}
.sb-backdrop{display:block}
.ah-burger{display:flex}
.ah{gap:12px;padding:0 14px}
/* larger tap targets inside the drawer */
.sb-item{padding:12px}
.sb-acct{padding:11px 10px}
.ws.building{grid-template-columns:1fr;grid-template-rows:minmax(0,46vh) minmax(0,1fr)}
.ws.building .chat{border-right:none;border-bottom:1px solid var(--line)}
.chat-top,.log,.composer{max-width:100%}
.ah-tok{display:none}
/* tighten horizontal padding so 375px doesn't clip */
.chat-top{padding:14px 16px}
.log{padding:24px 16px 12px}
.composer{padding:12px 16px 18px}
.canvas-bar{padding:0 12px;gap:10px}
.canvas-bar .addr{min-width:0}
.canvas-bar .acts{gap:6px}
.canvas-bar .acts button{padding:6px 10px}
.stage{padding:16px}
.bdod ol{grid-template-columns:1fr}
.set{padding:32px 18px 72px}
.card{padding:20px 18px}
.row{gap:14px}
.set-nav a{padding:13px 12px}
}
@media (prefers-reduced-motion:reduce){
.sw::after,.ah-menu,.saved{transition:none}
.ws{transition:none}
.ws.building .canvasw{animation:none}
/* drawer still opens, just without the slide */
.sb,.sb-backdrop{transition:none}
/* build 実況 lands in its final state with no motion */
.build-paper *{animation:none!important;transition:none}
.bsteps li.active .bs-ico{animation:none}
.bpanel-head .bp-title::before{animation:none}
.bsteps li,.bs-tm,.bdod li{transition:none}
}
/* ---- dark theme ----------------------------------------------------------
The whole product UI is token-driven, so dark = one override of the token
set. Base #131519 matches the already declared in
both app pages. Two entry points, kept identical:
• prefers-color-scheme:dark → auto, unless a manual light override is set
• [data-theme="dark"] → manual force (future in-app toggle; no UI yet)
[data-theme="light"] on :root forces light even on a dark OS. Only .app-shell
themes, so legal/works (no .app-shell, base.css only) can never be dragged in.
--dark-tokens are duplicated below rather than shared because a media query
and an attribute selector can't be merged into one rule. */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){--app-bg:#131519}
:root:not([data-theme="light"]) .app-shell{
--ink:#EEEAE2;
--ink-2:#EEEAE2;
--paper-2:#22272E;
--paper-3:#2A3038;
--line:rgba(255,255,255,.11);
--line-soft:rgba(255,255,255,.07);
--sub:rgba(238,234,226,.56);
--accent:#EF5C3F;
--sb-bg:#171A1F;
--surface:#1C2026;
--surface-hover:#232830;
--canvas:#0E1013;
--hover:rgba(255,255,255,.05);
--hover-2:rgba(255,255,255,.07);
--hover-3:rgba(255,255,255,.09);
--tx:rgba(238,234,226,.86);
--tx-sb:rgba(238,234,226,.74);
--placeholder:rgba(238,234,226,.36);
--dots:rgba(238,234,226,.34);
--ava-bg:#EBE5D9;
--chip-bg:rgba(255,255,255,.12);
--chip-fg:#EEEAE2;
--send-bg:#EEEAE2;
--send-fg:#16171B;
--send-bg-hover:#fff;
--send-off:rgba(255,255,255,.13);
--pri-bg:#EEEAE2;
--pri-fg:#16171B;
--online:#4FB884;
--online-soft:rgba(79,184,132,.18);
--accent-soft:rgba(239,92,63,.42);
--accent-glow:rgba(239,92,63,.22);
--danger-hover:rgba(239,92,63,.15);
--sw-off:rgba(255,255,255,.2);
--composer-fade:#1C2026;
--composer-border-focus:rgba(255,255,255,.3);
--shadow-1:0 1px 3px rgba(0,0,0,.4);
--shadow-2:0 6px 16px rgba(0,0,0,.5);
--shadow-composer:0 3px 14px rgba(0,0,0,.35);
--shadow-composer-focus:0 8px 26px rgba(0,0,0,.5);
--menu-shadow:0 16px 40px rgba(0,0,0,.55);
--paper-shadow:0 18px 50px rgba(0,0,0,.55);
--mk-filter:invert(1) brightness(1.6) grayscale(1);
--logo-light:none;
--logo-dark:block;
}
/* .sb-list / .set-nav are