/* SMART BUILD shell, look (b) いろどり in the logo's colors: coral #E87C67, plum #5A3360 and
   charcoal #2F303B (the two speech bubbles and the word mark), on calm, light surfaces. Cards have
   1px light borders and no shadow; only the main action of an area is a solid (plum) button; only
   floating layers (popups, the phone sheet, the look panel) get a soft shadow. Mascot: スマビー
   (Smabee), a block robot in the same colors (public/smabee-*.svg); logo: public/logo*.png.
   The generated app (.app, drawn by render.js) keeps its own look: see "the demo" below, where the
   shell tokens it uses are pinned back to the values it was designed with. */
:root {
  --sb-bg: #F8F5F7;          /* a faint plum-grey page background */
  --sb-panel: #FFFFFF;
  --sb-ink: #2F303B;         /* charcoal (the word mark): text */
  --sb-sub: #5C5D69;
  --sb-line: #E5DEE6;        /* card borders: a light plum tint */
  --sb-line-soft: #F0EBF1;   /* hairlines inside cards, empty progress blocks */
  --sb-line-input: #8A8393;  /* text fields: 3:1 on white */
  --sb-btn-line: #D9CFDC;    /* quiet buttons */
  --sb-accent: #5A3360;      /* plum: the one solid button (white text) */
  --sb-accent-hover: #6D4274;
  --sb-accent-ink: #FFFFFF;
  --sb-soft: #F1E9F2;        /* light plum */
  --sb-hover: #F7F1F7;
  --sb-sun-soft: #FDEDE8;    /* light coral: selected, "try this", things to look at */
  --sb-sun-line: #EFB9AC;
  --sb-coral: #E87C67;
  --sb-coral-soft: #FCE4DE;
  --sb-mint: #5A3360;        /* progress and done marks follow the plum */
  --sb-mint-light: #C7AFCB;
  --sb-mint-soft: #F1E9F2;
  --sb-blue: #A07AA6;        /* a lighter plum for the fourth category */
  --sb-demo-bg: #E9E8EE;     /* the canvas the demo window sits on */
  --sb-band: #F4EDF5;        /* Smart Build's strip above the demo (guide, role bar) */
  --sb-band-line: #E3D4E6;
  --sb-focus: #7A4B81;
  --sb-link-line: #B8A6BC;
  --sb-warn: #7A4A0C;
  --sb-warn-bg: #FFF3CC;
  --sb-ok: #5A3360;
  --sb-ok-bg: #F1E9F2;
  --sb-err: #B42F1D;
  --sb-err-bg: #FCE4DE;
  --sb-float: 0 12px 32px rgba(47, 48, 59, .14);  /* floating layers only */
  --sb-stripe: linear-gradient(90deg, var(--sb-coral) 0 50%, var(--sb-accent) 50% 100%);
  --app-primary: #3b6fd8;
  --app-accent: #f2b84b;
  --radius: 12px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Yu Gothic", Meiryo, "DejaVu Sans", "IPAPGothic", "IPA Pゴシック", sans-serif;
  color: var(--sb-ink);
  background: var(--sb-bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--sb-bg); line-height: 1.6; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.boot { padding: 2rem; color: var(--sb-sub); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ic { flex: none; display: inline-block; vertical-align: -.15em; }
.smabee { display: block; flex: none; height: auto; }
:where(.start-page, .gate, .ws-head, .chat, .guide, .pbar, .frame-label, .panel-pop, .look-panel, .empty-demo, .real-banner) :focus-visible,
.drawer-toggle:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 2px; }
.muted { color: var(--sb-sub); font-size: .9rem; margin: .2rem 0 .5rem; }
.error-text { color: var(--sb-err); font-size: .9rem; font-weight: 700; }
.error-text:empty { margin: 0; }
.notice { background: var(--sb-warn-bg); color: var(--sb-warn); border-radius: 10px; padding: .55rem .8rem; font-size: .9rem; margin: 1rem 0; }

/* ---------- buttons: quiet by default; .primary is the one solid button of an area ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--sb-btn-line); background: #fff; color: var(--sb-ink); border-radius: 10px; padding: .42rem .95rem; line-height: 1.4; font-weight: 600; text-decoration: none; transition: background-color .12s, border-color .12s; }
.btn:hover { background: var(--sb-hover); border-color: var(--sb-link-line); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-accent-ink); font-weight: 700; }
.btn.primary:hover { background: var(--sb-accent-hover); border-color: var(--sb-accent-hover); }
.btn.ghost { background: transparent; border-color: transparent; padding: .3rem .5rem; text-decoration: underline; text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; }
.btn.ghost:hover { background: var(--sb-hover); border-color: transparent; }
.btn.small { padding: .22rem .7rem; font-size: .86rem; border-radius: 8px; }
.btn.chip { display: inline-flex; border-radius: 999px; background: #fff; color: var(--sb-sub); font-size: .84rem; font-weight: 600; line-height: 1.4; padding: .18rem .7rem; }
.btn.chip:hover:not(:disabled) { color: var(--sb-ink); }
.btn.chip.on { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); color: var(--sb-ink); }
.btn.danger { color: var(--sb-err); }
.btn.warn { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }

/* ---------- brand ---------- */
.brand { display: inline-flex; align-items: center; gap: .45rem; color: var(--sb-ink); font-weight: 800; font-size: .95rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap; flex: none; }
.brand .smabee { width: 38px; }
.brand-word b { display: inline-block; background: var(--sb-accent); border-radius: 5px; padding: 0 .3rem; line-height: 1.35; font-weight: 800; }
.brand-logo { display: block; height: 30px; width: auto; }
.gate .brand-logo { height: 40px; margin: 0 auto; }
@media (max-width: 640px) { .ws-head .brand-logo { content: url(/logo-mark.png); height: 30px; } }
.avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sb-soft); overflow: hidden; }
.avatar .smabee { width: 32px; }

/* ---------- start ---------- */
.start { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
.start-page { min-height: 100vh; }
.top-head { position: relative; display: flex; align-items: center; gap: .8rem; padding: .7rem 2rem calc(.7rem + 3px); background: #fff; }
.top-head::after, .ws-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--sb-stripe); pointer-events: none; }
.top-head .spacer { flex: 1; }
.resume-slot { display: contents; }
.resume { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; max-width: 34rem; border: 1px solid var(--sb-btn-line); border-radius: 10px; padding: .2rem .3rem .2rem .8rem; background: #fff; color: var(--sb-ink); font-size: .86rem; text-decoration: none; white-space: nowrap; }
.resume b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.resume .when { color: var(--sb-sub); font-size: .78rem; }
.resume .go { background: var(--sb-soft); border-radius: 7px; padding: 0 .5rem; font-weight: 700; }
.resume:hover { background: var(--sb-hover); }
.top-head .scope { color: var(--sb-ink); font-size: .84rem; text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; }
.start-page .start { max-width: 1120px; padding: 3rem 2rem 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem 3.5rem; align-items: start; }
.hello-tag { display: inline-block; background: var(--sb-mint-soft); color: var(--sb-ok); border-radius: 999px; padding: .1rem .75rem; font-weight: 700; font-size: .84rem; }
.start-page h1 { font-size: 2.2rem; line-height: 1.4; margin: .8rem 0 .7rem; font-weight: 800; letter-spacing: .01em; }
.start-page h1 mark { background: linear-gradient(transparent 62%, #FFE08A 62%); color: inherit; padding: 0 .08em; }
.start-page .lead { margin: 0; color: var(--sb-sub); font-size: 1rem; line-height: 1.8; }
.scene { display: flex; align-items: flex-end; gap: .7rem; margin-top: 1.8rem; }
.scene .smabee { width: 180px; }
.scene .say { position: relative; margin: 0 0 3.2rem; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; padding: .8rem 1.05rem; line-height: 1.75; }
.scene .say b { font-weight: 700; }
.scene .say::after { content: ""; position: absolute; left: -8px; bottom: 18px; width: 14px; height: 14px; background: #fff; border-left: 1px solid var(--sb-line); border-bottom: 1px solid var(--sb-line); transform: rotate(45deg); }
.scene .say small { display: block; color: var(--sb-sub); font-size: .86rem; }
.start-card { background: #fff; border: 1px solid var(--sb-line); border-radius: 20px; padding: 1.5rem 1.6rem 1.4rem; }
.start-card .ask { font-weight: 700; font-size: 1.05rem; }
.start-card .ask small { font-weight: 400; color: var(--sb-sub); font-size: .82rem; margin-left: .5rem; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .75rem 0 1rem; }
.tile { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--sb-btn-line); border-radius: 12px; padding: .55rem .75rem; font-weight: 600; font-size: .92rem; line-height: 1.4; text-align: left; transition: background-color .12s, border-color .12s; }
.tile:hover { background: var(--sb-hover); }
.tile .sq { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.t-pain .sq { background: var(--sb-coral); }
.t-image .sq { background: var(--sb-accent); }
.t-sheet .sq { background: var(--sb-mint); }
.t-service .sq { background: var(--sb-blue); }
.tile.on { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }
.tile.on::after { content: "✓"; content: "✓" / ""; margin-left: auto; color: var(--sb-ok); font-weight: 800; }
.start-card textarea { display: block; width: 100%; min-height: 6.6rem; border: 1px solid var(--sb-line-input); border-radius: 12px; padding: .75rem .9rem; font-size: 1rem; resize: vertical; background: #fff; }
.start-card textarea::placeholder, .composer textarea::placeholder { color: #6A7294; }
.start-card textarea:focus, .composer textarea:focus { outline: 2px solid var(--sb-focus); outline-offset: 1px; border-color: var(--sb-focus); }
.start-card .actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.start-card .actions .spacer { flex: 1; }
.start-card .actions .hint { color: var(--sb-sub); font-size: .78rem; }
.btn.go { font-size: 1.05rem; padding: .55rem 1.5rem; border-radius: 12px; }
.btn.mic { padding: .45rem .85rem; }
.rec-dot { width: .7em; height: .7em; border-radius: 50%; background: var(--sb-coral); }
.start-card .error-text { margin: .6rem 0 0; }
.start-card .notice { margin: 1rem 0 0; }
.start-card .notice:not(.warn) { display: flex; gap: .5rem; align-items: flex-start; background: var(--sb-bg); color: var(--sb-sub); font-size: .82rem; padding: .55rem .75rem; }
.start-card .notice .ic { margin-top: .2em; }
.start-page .examples { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 0; color: var(--sb-sub); font-size: .88rem; }
.examples .ex { background: #fff; border: 1px solid var(--sb-line); border-radius: 999px; padding: .12rem .8rem; color: var(--sb-ink); }
.start-page .projects { grid-column: 1 / -1; }
.projects:empty { display: none; }
.projects h2 { font-size: 1rem; font-weight: 700; margin: 1rem 0 .5rem; }
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.plist a { display: grid; gap: .05rem; padding: .55rem .85rem; border: 1px solid var(--sb-line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; min-width: 0; }
.plist a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.plist a:hover { background: var(--sb-hover); }
.plist .muted { margin: 0; font-size: .8rem; }
.start-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--sb-line); font-size: .85rem; }
.start-page .start-foot { grid-column: 1 / -1; margin-top: 1.5rem; }
.start-foot a { color: var(--sb-ink); text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; }
.gate { max-width: 420px; margin: 5rem auto; padding: 1.6rem; background: #fff; border-radius: 18px; border: 1px solid var(--sb-line); }
.gate input { width: 100%; padding: .6rem .8rem; border: 1px solid var(--sb-line-input); border-radius: 10px; margin: .75rem 0; }
.gate label.muted { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 .8rem; }
.gate label.muted input { width: auto; margin: 0; padding: 0; }
.gate > .muted:last-child { margin-top: .9rem; }
.gate a { color: var(--sb-ink); text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; }

/* ---------- workspace ---------- */
.ws { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; grid-template-rows: auto 1fr; height: 100vh; }
.ws-head { position: relative; z-index: 7; grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .5rem 1.1rem calc(.5rem + 3px); background: #fff; }
.ws-head .title { flex: 1; min-width: 6rem; padding-left: .4rem; font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbtn { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--sb-btn-line); border-radius: 10px; padding: .28rem .8rem; font-size: .86rem; font-weight: 600; line-height: 1.4; color: var(--sb-ink); text-decoration: none; white-space: nowrap; }
.hbtn:hover { background: var(--sb-hover); border-color: var(--sb-link-line); }
.hbtn .num { background: var(--sb-coral-soft); color: var(--sb-err); border-radius: 999px; padding: 0 .45rem; font-size: .74rem; font-weight: 700; line-height: 1.5; }
.hbtn .num.zero { background: var(--sb-mint-soft); color: var(--sb-ok); }
.hbtn.warn { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }
.hsel, .pbar select { appearance: none; -webkit-appearance: none; max-width: 100%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5275' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center / 14px 14px; border: 1px solid var(--sb-btn-line); border-radius: 10px; padding: .28rem 1.9rem .28rem .8rem; font-size: .86rem; font-weight: 600; line-height: 1.4; cursor: pointer; }
.hsel:hover, .pbar select:hover { background-color: var(--sb-hover); }
.hacts { display: flex; gap: .45rem; align-items: center; }
.hmore { display: none; position: relative; padding: .28rem .5rem; }
.hmore .dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--sb-coral); box-shadow: 0 0 0 2px #fff; }

/* ---------- chat ---------- */
.chat { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--sb-bg); border-right: 1px solid var(--sb-line); }
.sheet-grip { display: none; }
.chat-head { flex: none; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem .6rem; border-bottom: 1px solid var(--sb-line-soft); }
.ch-who { min-width: 0; line-height: 1.35; }
.ch-name { font-weight: 700; }
.ch-role { font-size: .8rem; color: var(--sb-sub); }
.chat-close { display: none; margin-left: auto; flex: none; align-items: center; background: #fff; border: 1px solid var(--sb-btn-line); border-radius: 10px; padding: .2rem .7rem; font-weight: 600; font-size: .85rem; color: var(--sb-ink); }
.msgs { flex: 1; overflow-y: auto; padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .9rem; }
.mrow { display: flex; gap: .6rem; align-items: flex-start; align-self: stretch; min-width: 0; }
.mrow .msg { min-width: 0; max-width: 100%; }
.msg { max-width: 92%; padding: .6rem .85rem; border-radius: 14px; white-space: pre-wrap; word-break: break-word; font-size: .95rem; line-height: 1.7; }
.msg.ai { background: #fff; border: 1px solid var(--sb-line); border-radius: 4px 16px 16px 16px; padding: .7rem .9rem; }
.msg.user { align-self: flex-end; max-width: 85%; background: var(--sb-soft); color: var(--sb-ink); border-radius: 16px 16px 4px 16px; padding: .6rem .95rem; }
.msg.user.choice { background: #fff; border: 1px solid var(--sb-line); }
.msg.ai.error, .msg.ai.cancelled { background: var(--sb-err-bg); border-color: #F3C4BC; }
.msg .opts { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.msg .opts .btn { justify-content: flex-start; text-align: left; }
.msg .opts .btn.alt { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }
.msg .hint { font-size: .82rem; color: var(--sb-sub); margin-top: .35rem; }
.msg .qline { margin-top: .4rem; font-weight: 700; }
.mrow .vcard { flex: 1; }
.vcard h4 { margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--sb-ok); }
.vcard .vc-lead { margin: .1rem 0 .4rem; font-weight: 600; }
.first-try { display: grid; gap: .05rem; margin-top: .6rem; background: var(--sb-sun-soft); border-radius: 10px; padding: .5rem .75rem; font-size: .9rem; }
.first-try .ft-label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .82rem; }
.vc-insights { margin-top: .6rem; border: 1px dashed var(--sb-mint-light); background: var(--sb-soft); border-radius: 10px; padding: .55rem .75rem; font-size: .9rem; }
.vc-insights .vi-title { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .82rem; color: var(--sb-accent); margin-bottom: .3rem; }
.vc-insights ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.vc-insights li { display: flex; align-items: flex-start; gap: .5rem; }
.vc-insights .vi-text { display: grid; flex: 1; min-width: 0; }
.vc-insights .vi-text small { color: var(--sb-sub); line-height: 1.5; }
.vc-insights .qlook { flex-shrink: 0; }
.vc-problems { margin-top: .6rem; border: 1px solid var(--sb-line); border-radius: 10px; padding: .5rem .75rem; font-size: .9rem; }
.vc-problems .vp-title { font-weight: 700; font-size: .82rem; margin-bottom: .2rem; }
.vc-problems ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.vc-problems li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .2rem; }
.vc-problems li > span:last-child { display: grid; }
.vc-problems small { color: var(--sb-sub); font-size: .82rem; line-height: 1.5; }
.vc-problems .vp-mark { font-weight: 800; color: var(--sb-ok); }
.vc-problems li.open .vp-mark { color: var(--sb-coral, #d9734e); }
.vcard .muted { margin: .6rem 0 0; font-size: .82rem; font-weight: 700; }
.vcard ul { margin: .15rem 0 .25rem 1.1rem; padding: 0; }
.vcard .meta { font-size: .78rem; color: var(--sb-sub); margin-top: .5rem; }

/* the "making it" box */
.job { flex: none; display: flex; gap: .8rem; margin: 0 1rem .8rem; padding: .75rem .9rem; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; font-size: .9rem; }
.job .jm { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; background: var(--sb-soft); }
.job .jm .smabee { width: 50px; }
.job .jb { flex: 1; min-width: 0; }
.job .stage { font-weight: 700; font-size: .98rem; }
.job .times { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--sb-sub); }
.job .jbar { height: 8px; margin: .5rem 0 .45rem; border-radius: 999px; background: var(--sb-line-soft); overflow: hidden; }
.job .jbar > i { display: block; height: 100%; width: 3%; border-radius: inherit; background: var(--sb-stripe); transition: width 1s linear; }
.job .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .83rem; }
.job .steps li { display: flex; align-items: flex-start; gap: .4rem; }
.job .steps li.done { color: var(--sb-sub); }
.job .steps li.done .ic { width: 14px; height: 14px; margin-top: .25em; color: var(--sb-mint); }
.job .steps li.now { font-weight: 700; }
.job .steps .bullet { flex: none; width: 8px; height: 8px; margin: .55em 3px 0; border-radius: 50%; background: var(--sb-coral); }
.job .meanwhile { margin-top: .45rem; font-size: .83rem; color: var(--sb-sub); }
.job .btn.danger { margin-top: .55rem; }
.chat:has(> .qslot) .job .meanwhile { display: none; }
/* On a short screen the job box and the card scroll inside themselves, so the input stays in view. */
.chat > .job, .chat > .qslot { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
/* a swiped card slides out of its slot (no sideways scroll); the padding keeps its focus ring */
.chat > .qslot { overflow-x: hidden; padding: 3px; margin: 0 calc(1rem - 3px) .7rem; overscroll-behavior: contain; }
/* The card's slide stays inside the deck, so it never makes the slot wider (phones scroll it
   sideways otherwise and the text is cut at the edge). */
.qdeck { overflow: hidden; overflow: clip; overflow-clip-margin: 4px; }
.qdeck .qcard:focus-visible { outline-offset: -2px; }
.msgs { overscroll-behavior: contain; }
@media (prefers-reduced-motion: no-preference) {
  .job .jm .smabee { animation: sb-bob 2.4s ease-in-out infinite; }
  .job .jbar.over > i { animation: sb-pulse 1.4s ease-in-out infinite; }
}
@keyframes sb-bob { 50% { transform: translateY(-2px); } }
@keyframes sb-pulse { 50% { opacity: .4; } }

/* quick checks: two-way cards while a demo is made, and the answers that differ */
.qslot { margin: 0 1rem .7rem; }
.qdeck { margin-bottom: .8rem; }
.qintro { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .45rem; font-size: .84rem; color: var(--sb-sub); }
.qlater { flex: none; background: none; border: 0; padding: 0; color: var(--sb-sub); font-size: .8rem; text-decoration: underline; text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; cursor: pointer; }
.qcard.qprep { display: flex; align-items: center; gap: .75rem; min-height: 9.6rem; color: var(--sb-sub); cursor: default; }
.qthanks { display: flex; align-items: center; gap: .4rem; color: var(--sb-ok); font-weight: 700; font-size: .9rem; }
.qcard { background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; padding: .85rem 1rem .75rem; touch-action: pan-y; user-select: none; transition: transform .16s ease, opacity .16s ease; cursor: grab; }
.qcard:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: 2px; }
.qcard.go-right { transform: translateX(120%) rotate(8deg); opacity: 0; }
.qcard.go-left { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.qcard.go-down { transform: translateY(30%); opacity: 0; }
.qhead { font-size: .76rem; font-weight: 700; color: var(--sb-sub); }
.qplace { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; margin-top: .3rem; padding: .2rem .55rem; background: var(--sb-sun-soft); border-radius: 8px; font-size: .8rem; font-weight: 600; color: var(--sb-ink); }
.qplace > span { flex: 1 1 8rem; min-width: 0; }
.qlook { flex: none; border: 1px solid var(--sb-sun-line); background: #fff; border-radius: 999px; padding: 0 .6rem; font-size: .78rem; font-weight: 700; color: var(--sb-ink); cursor: pointer; }
.qlook:hover { background: var(--sb-hover); }
.panel-pop li .qlook { margin-left: .4rem; }
/* the system map (the whole business, built area by area) */
.hbtn.map .num { background: var(--sb-soft); color: var(--sb-accent); }
.map-list { margin: .4rem 0; padding-left: 1.3rem; }
.map-list li { margin: 0 0 .7rem; }
.map-head { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.map-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 0 .55rem; }
.map-chip.done { background: var(--sb-ok-bg); color: var(--sb-ok); }
.map-chip.now { background: var(--sb-sun-soft); color: var(--sb-ink); }
.map-chip.todo { background: var(--sb-bg); color: var(--sb-sub); border: 1px solid var(--sb-line); }
.map-guess { font-size: .72rem; color: var(--sb-sub); border: 1px dashed var(--sb-line-input); border-radius: 999px; padding: 0 .5rem; }
.map-sum { font-size: .88rem; margin: .1rem 0 .35rem; }
.map-chip.hand { background: var(--sb-sun-soft); color: var(--sb-ink); }
.map-cap { display: flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 600; color: var(--sb-sub); margin: .2rem 0 .6rem; }
.map-capbar { flex: 1; height: 6px; border-radius: 999px; background: var(--sb-line-soft); overflow: hidden; }
.map-capbar > i { display: block; height: 100%; background: var(--sb-accent); border-radius: inherit; }
.map-capbar.high > i { background: var(--sb-coral); }
.map-full { background: var(--sb-sun-soft); border: 1px solid var(--sb-sun-line); border-radius: 12px; padding: .6rem .8rem; margin: 0 0 .7rem; font-size: .86rem; }
.map-full p { margin: .2rem 0; }
.map-full ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.map-list .row { display: flex; gap: .4rem; flex-wrap: wrap; }
.vc-map { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; padding: .4rem .6rem; background: var(--sb-soft); border-radius: 10px; font-size: .88rem; font-weight: 600; }
.vc-map > span { flex: 1 1 12rem; }

/* the part of the demo a check is about, lit up for a moment */
.appframe .spot, .appframe.spot { outline: 3px solid var(--sb-coral); outline-offset: 4px; border-radius: 10px; animation: spot 1s ease-in-out 3; }
@keyframes spot { 50% { outline-color: rgba(232, 124, 103, .25); } }
@media (prefers-reduced-motion: reduce) { .appframe .spot, .appframe.spot { animation: none; } }
.qtext { margin: .25rem 0 .85rem; font-weight: 700; font-size: 1.05rem; line-height: 1.6; }
.qbtns { display: flex; gap: .5rem; }
.qbtns .btn { flex: 1; }
.qskip { display: block; margin: .55rem auto 0; background: none; border: 0; color: var(--sb-sub); font-size: .82rem; text-decoration: underline; text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; cursor: pointer; }
.qdiffer { background: var(--sb-sun-soft); border: 1px solid var(--sb-sun-line); border-radius: 14px; padding: .75rem .9rem; font-size: .9rem; }
.qd-title { font-weight: 700; margin-bottom: .3rem; }
.qdiffer ul { margin: .2rem 0 .6rem; padding-left: 1.1rem; }
.qdiffer .row { display: flex; gap: .5rem; align-items: center; }

/* the input */
.composer { flex: none; padding: .7rem 1rem .9rem; background: #fff; border-top: 1px solid var(--sb-line); }
.composer .crow { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .55rem; }
.composer .crow .btn.chip { font-size: .8rem; padding: .1rem .55rem; gap: .25rem; }
.composer .cin { display: flex; gap: .5rem; align-items: flex-end; }
.composer textarea { flex: 1; min-width: 0; display: block; min-height: 3.6rem; max-height: 10rem; border: 1px solid var(--sb-line-input); border-radius: 12px; padding: .5rem .8rem; background: #fff; font-size: .92rem; line-height: 1.5; resize: vertical; }
.composer .send { flex: none; white-space: nowrap; padding: .55rem .95rem; }
.target-chip { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: .45rem; background: var(--sb-sun-soft); border: 1px solid var(--sb-sun-line); border-radius: 999px; padding: .1rem .25rem .1rem .75rem; font-size: .85rem; font-weight: 600; }
.target-chip .btn { padding: 0 .45rem; text-decoration: none; }
.queued { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .45rem; background: var(--sb-soft); border-radius: 10px; padding: .35rem .45rem .35rem .7rem; font-size: .85rem; }
.queued > span { flex: 1; min-width: 10rem; }

/* ---------- the right side: guide, role bar, and the area around the demo ---------- */
.demo { min-height: 0; overflow-y: auto; background: var(--sb-demo-bg); }
.demo-scroll { padding: 1.1rem 1rem 2rem; }
.empty-demo { color: var(--sb-sub); padding: 3rem 1rem; text-align: center; }
.empty-demo > .ed-head { font-weight: 700; color: var(--sb-ink); }
/* Before the first demo, with nothing being made: the next step, in the middle. */
.ed-ask { max-width: 32rem; margin: 1.4rem auto 0; padding: 1rem 1.1rem 1.1rem; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; box-shadow: var(--sb-float); text-align: left; color: var(--sb-ink); }
.ed-who { display: flex; align-items: center; gap: .6rem; }
.ed-who .smabee { width: 40px; flex: none; }
.ed-why { margin: .7rem 0 0; color: var(--sb-sub); font-size: .9rem; line-height: 1.6; }
.ed-why + .ed-q { margin-top: .3rem; }
.ed-q { margin: .7rem 0 0; font-size: 1.02rem; font-weight: 700; line-height: 1.6; white-space: pre-wrap; }
.ed-opts { display: flex; flex-direction: column; gap: .45rem; margin-top: .85rem; }
.ed-opts .btn { justify-content: flex-start; text-align: left; }
.ed-more { margin-top: .6rem; }
/* The phone's conversation button, when スマビー is waiting on an answer. */
.drawer-toggle.attn { background: var(--sb-accent); color: var(--sb-accent-ink); border-color: var(--sb-accent); }
.drawer-toggle.attn::after { content: ""; position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--sb-coral); border: 2px solid #fff; }
@media (prefers-reduced-motion: no-preference) { .drawer-toggle.attn { animation: sb-nudge 2.4s ease-in-out infinite; } }
@keyframes sb-nudge { 0%, 80%, 100% { transform: none; } 88% { transform: translateY(-3px); } }
.ready-bar { position: sticky; top: .6rem; z-index: 5; display: flex; align-items: center; gap: .85rem; max-width: 34rem; margin: 0 auto 1rem; padding: .75rem 1rem; background: #fff; border: 2px solid var(--sb-coral); border-radius: 16px; text-align: left; color: var(--sb-ink); box-shadow: var(--sb-float); }
.ready-bar .rb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ready-bar .rb-text b { font-size: 1.02rem; }
.ready-bar .rb-text span { font-size: .84rem; color: var(--sb-sub); }
/* While the first demo is made: its screens as tiles, and one tip at a time */
.mk { max-width: 34rem; margin: 1.2rem auto 0; display: grid; gap: .8rem; text-align: left; }
.mk-screens:empty { display: none; }
.mk-screens { background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; padding: .9rem 1.1rem; color: var(--sb-ink); }
.mk-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mk-list li { display: flex; align-items: center; gap: .55rem; font-size: .93rem; color: var(--sb-sub); }
.mk-list li.done { color: var(--sb-ink); }
.mk-list li.done svg { color: var(--sb-ok); flex: none; }
.mk-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--sb-mint-light); border-top-color: var(--sb-accent); animation: mk-spin 1s linear infinite; }
.mk-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-role { font-size: .78rem; color: var(--sb-sub); border: 1px solid var(--sb-line); border-radius: 999px; padding: 0 .5rem; white-space: nowrap; }
.mk-tip { display: flex; gap: .6rem; align-items: baseline; background: var(--sb-soft); border-radius: 12px; padding: .7rem .95rem; color: var(--sb-ink); font-size: .92rem; }
.mk-tip-label { flex: none; font-size: .74rem; font-weight: 700; color: var(--sb-accent); letter-spacing: .08em; }
.mk-tip-text { transition: opacity .25s ease; }
.mk-tip-text.out { opacity: 0; }
@keyframes mk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mk-dot { animation: none; } .mk-tip-text { transition: none; } }
.meanwhile-box { max-width: 34rem; margin: 1.5rem auto 0; padding: 1.2rem 1.3rem; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; text-align: left; color: var(--sb-ink); }
.meanwhile-box .qdeck { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--sb-line-soft); }
.meanwhile-box .mw-title { font-weight: 700; margin-bottom: .3rem; }
.meanwhile-box p { margin: .3rem 0 .6rem; font-size: .9rem; color: var(--sb-sub); }

.real-banner { display: flex; gap: .75rem; align-items: center; justify-content: space-between; margin: 0; padding: .35rem .6rem .35rem 1.1rem; font-size: .86rem; border-radius: 0; }
.real-banner > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.real-banner .btn { flex: none; }
.real-banner.warn { background: var(--sb-sun-soft); border-bottom: 1px solid var(--sb-sun-line); }
.real-banner.block { background: var(--sb-err-bg); border-bottom: 1px solid #F3C4BC; }

/* スマビーの案内 (SMART BUILD side): one slim line above the demo window, said by スマビー as a
   speech bubble (like the chat). Details open on request; the demo keeps the space. */
.guide { position: sticky; top: 0; z-index: 6; padding: .6rem 1rem .45rem; background: var(--sb-demo-bg); font-size: .9rem; }
.gbar { display: flex; align-items: flex-start; gap: .5rem; max-width: 1040px; margin: 0 auto; }
.gface { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid var(--sb-band-line); overflow: hidden; }
.gbubble { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; background: #fff; border: 1px solid var(--sb-band-line); border-radius: 4px 14px 14px 14px; padding: .3rem .45rem .3rem .75rem; min-height: 34px; }
.gtag { flex: none; font-size: .74rem; font-weight: 700; color: var(--sb-accent); background: var(--sb-soft); border-radius: 999px; padding: .05rem .6rem; white-space: nowrap; }
.gnow { flex: 1 1 16rem; min-width: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gnow b { font-weight: 700; color: var(--sb-accent); }
.gnow.reflect strong { font-weight: 700; }
.gacts { flex: none; display: flex; align-items: center; gap: .35rem; margin-left: auto; flex-wrap: wrap; }
.gmore { border: 0; background: none; padding: .1rem .3rem; color: var(--sb-sub); font-size: .8rem; text-decoration: underline; text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.gdetail { max-width: 1040px; margin: .4rem auto 0; padding: .65rem .9rem .7rem; background: #fff; border: 1px solid var(--sb-band-line); border-radius: 12px; max-height: 45vh; overflow-y: auto; font-size: .88rem; box-shadow: var(--sb-float); }
.gdetail[hidden] { display: none; }
.gdetail .gcheck { display: flex; gap: .35rem; align-items: flex-start; font-weight: 600; }
.gdetail .gcheck .ic { margin-top: .25em; }
.gdetail .assume { margin: .45rem 0; background: var(--sb-bg); border-radius: 8px; padding: .25rem .65rem; color: var(--sb-sub); }
.gdetail .assume b { color: var(--sb-ink); }
.gdetail .gintro { color: var(--sb-sub); }
.gdetail ol { margin: .45rem 0; padding-left: 1.4rem; }
.gdetail li { margin: .2rem 0; color: var(--sb-sub); }
.gdetail li.current { color: var(--sb-ink); font-weight: 700; }
.gdetail li.done { color: var(--sb-ok); }
.gdetail li .check { display: block; font-weight: 400; color: var(--sb-sub); font-size: .84rem; }
.gdetail .gbtns { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }

/* which role the demo is seen as: a control in the demo window's top bar */
.pbar { display: inline-flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--sb-sub); }
.pbar .plabel { font-weight: 700; white-space: nowrap; }
.seg { display: inline-flex; gap: 2px; max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--sb-btn-line); border-radius: 10px; padding: 2px; }
.seg button { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; border-radius: 8px; padding: .05rem .7rem; font-weight: 600; font-size: .8rem; white-space: nowrap; color: var(--sb-sub); }
.seg button:hover { background: var(--sb-hover); color: var(--sb-ink); }
.seg button.on { background: var(--sb-soft); color: var(--sb-ink); font-weight: 700; cursor: default; }
.pbar .who { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.pbar select { padding-top: .1rem; padding-bottom: .1rem; font-size: .8rem; }

/* ================= the demo (unchanged look; drawn by render.js) ================= */
/* the generated app: a finished-looking standard look (E3b "見た目も初回品質"), themed by the
   contract's colors, tone and font. The person does not edit it in the demo. */
/* The demo is a window of its own on a grey canvas, apart from Smart Build's tinted strip. */
.appframe { max-width: 1040px; margin: 0 auto; border: 1px solid #D4D1DA; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 18px 40px rgba(47, 48, 59, .16), 0 2px 6px rgba(47, 48, 59, .06); }
.appframe .frame-label { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3rem .9rem; font-size: .76rem; color: var(--sb-sub); padding: .45rem .8rem; background: #F4F3F7; border-bottom: 1px solid #E2E0E7; }
.frame-dots { flex: none; display: inline-flex; gap: 6px; }
.frame-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E9A99C; }
.frame-dots i + i { background: #EDCB8E; }
.frame-dots i + i + i { background: #AFCFA6; }
.frame-addr { flex: 0 1 auto; min-width: 0; max-width: 22rem; display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid #E2E0E7; border-radius: 999px; padding: .1rem .8rem; font-weight: 700; color: var(--sb-ink); }
.frame-addr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-label .pbar { margin-left: auto; }
/* A role that works on a phone, seen from a PC: the demo at a phone's width. */
.appframe.as-phone { max-width: 420px; }
.dt-pick { display: flex; gap: .5rem; flex-wrap: wrap; }
.dt-pick > input { flex: 1 1 9rem; }
.dt-pick > select { flex: 0 1 8rem; }
/* Laid out as on a phone (the same rules as the phone-width ones below, for the narrow frame on a PC). */
.appframe.as-phone .app-head { padding: .6rem .8rem; }
.appframe.as-phone .app-nav { margin-left: 0; width: 100%; }
.appframe.as-phone .app-body { padding: 1rem .8rem 1.4rem; gap: .95rem; }
.appframe.as-phone .page-title, .appframe.as-phone .blk h2 { font-size: 1.2rem; }
.appframe.as-phone .b-hero { padding: 1.2rem 1.1rem; }
.appframe.as-phone .b-hero h2 { font-size: 1.35rem; }
.appframe.as-phone .look-note .look-text { display: none; }
.appframe.as-phone .b-form > .form { grid-template-columns: minmax(0, 1fr); }
.appframe.as-phone .app.look.hero-split .b-hero:has(> .imgph) { grid-template-columns: minmax(0, 1fr); }
.appframe.as-phone .app.look.hero-split .b-hero > .imgph, .appframe.as-phone .app.look.hero-split .b-hero > :not(.imgph) { grid-column: auto; grid-row: auto; }
.appframe.as-phone .dhead { flex-direction: column; align-items: stretch; }
.appframe.as-phone .dhead .imgph { width: auto; }
.appframe.as-phone .cards { grid-template-columns: 1fr; }
.appframe.as-phone .bulk .bday { grid-template-columns: 1fr; gap: .3rem; }
.appframe.as-phone .frame-label { justify-content: flex-start; }
.frame-size { border: 1px solid #D4D1DA; background: #fff; border-radius: 999px; padding: .1rem .65rem; font: inherit; font-size: .74rem; font-weight: 600; color: var(--sb-ink); cursor: pointer; }
.frame-size:hover { background: var(--sb-hover); }
@media (max-width: 820px) { .frame-size { display: none; } }
.app {
  --p: var(--app-primary); --p0: var(--app-primary-raw, var(--app-primary)); --a: var(--app-accent);
  --r: 12px; --ink: #1c2230; --sub: #5d6678; --line: #e4e7ed; --card: #fff;
  --surface: color-mix(in srgb, var(--p0) 4%, #f6f7f9);
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.06);
  color: var(--ink); background: var(--surface);
}
.app.tone-business { --r: 8px; --surface: #f4f5f7; }
.app.tone-warm { --r: 14px; --surface: color-mix(in srgb, var(--a) 7%, #fbf8f4); }
.app.tone-vivid { --r: 14px; }
.app.tone-playful { --r: 18px; --surface: color-mix(in srgb, var(--a) 9%, #fbfaf7); }
.app.font-serif { font-family: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", serif; }
.app.font-rounded { font-family: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Hiragino Sans", sans-serif; }

.app-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; padding: .7rem 1.2rem; background: #fff; border-bottom: 1px solid var(--line); }
.tone-vivid .app-head, .tone-playful .app-head { background: linear-gradient(120deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--a))); color: #fff; border-bottom: 0; }
.app-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.app-mark { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: calc(var(--r) * .75); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--a))); box-shadow: 0 2px 6px color-mix(in srgb, var(--p) 30%, transparent); }
.tone-vivid .app-mark, .tone-playful .app-mark { background: rgba(255,255,255,.22); box-shadow: none; }
.apptitle { font-weight: 800; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-nav { display: flex; gap: .25rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.app-nav .tab { border: 0; background: transparent; color: var(--sub); padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; font-weight: 600; font-size: .9rem; }
.app-nav .tab:hover { background: color-mix(in srgb, var(--p) 8%, #fff); color: var(--p); }
.app-nav .tab.on { background: color-mix(in srgb, var(--p) 13%, #fff); color: var(--p); }
.tone-vivid .app-nav .tab, .tone-playful .app-nav .tab { color: rgba(255,255,255,.85); }
.tone-vivid .app-nav .tab:hover, .tone-playful .app-nav .tab:hover,
.tone-vivid .app-nav .tab.on, .tone-playful .app-nav .tab.on { background: rgba(255,255,255,.2); color: #fff; }

.app-body { padding: 1.3rem 1.3rem 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.page-title { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.4; }
.back { align-self: flex-start; font-size: .9rem; color: var(--p) !important; padding-left: 0 !important; }

.blk { position: relative; }
.blk.pickable { outline: 2px dashed #e0a800; outline-offset: 3px; cursor: crosshair; }
.blk.pickable:hover { background: #fff8db; }
.blk .bnote { font-size: .8rem; color: var(--sb-warn); background: var(--sb-warn-bg); border-radius: 6px; padding: .1rem .45rem; display: inline-block; margin-top: .5rem; }
.blk h2 { margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.4; }
.blk h3 { margin: 0 0 .7rem; font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.blk .sub { color: var(--sub); }
.b-heading .sub { margin-top: .15rem; }
.b-text { white-space: pre-wrap; line-height: 1.8; }
.b-list, .b-detail { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.05rem 1.15rem; }
.count { font-size: .72rem; font-weight: 600; color: var(--sub); background: #f1f3f6; border-radius: 999px; padding: .05rem .55rem; }
.b-hero { display: grid; gap: .7rem; border-radius: var(--r); padding: 1.7rem 1.6rem; background: linear-gradient(135deg, color-mix(in srgb, var(--p0) 16%, #fff), color-mix(in srgb, var(--a) 28%, #fff)); }
.b-hero h2 { font-size: 1.7rem; }
.b-hero p { margin: 0; color: var(--sub); max-width: 42em; line-height: 1.8; }
.b-hero .abtn.main { justify-self: start; padding: .65rem 1.3rem; font-size: .98rem; }
.b-hero .imgph { min-height: 170px; }
.b-note { padding: .7rem .95rem; border-radius: var(--r); background: color-mix(in srgb, var(--p0) 8%, #fff); font-size: .9rem; }
.b-note.warn { background: var(--sb-warn-bg); color: var(--sb-warn); }
.b-note.simulated { background: #f3edff; color: #5b3aa8; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; background: #efe8ff; color: #5b3aa8; margin-left: .35rem; vertical-align: middle; }
.badge.ai { background: var(--sb-warn-bg); color: var(--sb-warn); }
.empty { color: var(--sub); text-align: center; padding: 1.3rem 1rem; border: 1px dashed var(--line); border-radius: var(--r); background: #fcfcfd; font-size: .9rem; }

/* photo stand-in: a designed tile that says what the photo would show */
.imgph { position: relative; display: flex; align-items: flex-end; min-height: 120px; overflow: hidden; border-radius: calc(var(--r, 12px) * .8); color: #fff;
  background: linear-gradient(135deg, hsl(var(--h, 210) 55% 64%), color-mix(in srgb, hsl(var(--h, 210) 58% 42%) 55%, var(--p, #3b6fd8))); }
.imgph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 18%, rgba(255,255,255,.38), transparent 42%), radial-gradient(circle at 8% 95%, rgba(255,255,255,.2), transparent 40%); }
.imgph-mark { position: absolute; right: .7rem; top: .15rem; font-size: 3.4rem; font-weight: 800; line-height: 1.2; opacity: .35; }
.imgph-cap { position: relative; max-width: 100%; font-size: .74rem; padding: .3rem .6rem; background: rgba(0,0,0,.2); border-top-right-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; }
.card { border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1rem; background: var(--card); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.card.link { cursor: pointer; }
.card.link:hover { border-color: color-mix(in srgb, var(--p) 45%, var(--line)); box-shadow: 0 8px 20px rgba(16,24,40,.08); }
.card .imgph { margin: -.9rem -1rem .75rem; border-radius: 0; min-height: 112px; }
.card .ctitle { font-weight: 700; font-size: 1rem; margin-bottom: .4rem; line-height: 1.45; }
.fields { margin: 0; font-size: .88rem; display: grid; gap: .32rem; }
.fields > div { display: grid; grid-template-columns: minmax(4.5em, 42%) 1fr; gap: .6rem; align-items: baseline; }
.fields > div.wide { grid-template-columns: 1fr; gap: .1rem; }
.fields dt { color: var(--sub); font-size: .78rem; line-height: 1.45; }
.fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fields dd.num, .fields dd.nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-detail .fields { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 1.6rem; row-gap: .55rem; }
.dhead { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
.dhead .imgph { flex: none; width: 150px; min-height: 104px; }
.dlabel { font-size: .75rem; font-weight: 600; color: var(--sub); }
.dhead h3 { margin: 0; font-size: 1.3rem; }

.tblwrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th, .tbl td { text-align: left; padding: .62rem .65rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { color: var(--sub); font-weight: 600; font-size: .76rem; white-space: nowrap; background: #fafbfc; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.ttl { font-weight: 600; min-width: 8.5em; }
.tbl .nw { white-space: nowrap; }
.tbl .num { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.link { cursor: pointer; }
.tbl tr.link:hover td { background: color-mix(in srgb, var(--p) 5%, #fff); }
/* Several row actions stack in one narrow column, so the name column keeps its width. */
.tbl td.tact { text-align: right; white-space: nowrap; width: 1%; }
.tbl td.tact .acts { margin: 0; flex-direction: column; align-items: stretch; }
.chip { display: inline-block; font-size: .76rem; font-weight: 600; padding: .1rem .6rem; border-radius: 999px; white-space: nowrap; line-height: 1.6; }
.chip.c0 { background: #e8f0fe; color: #1e4fbf; }
.chip.c1 { background: #e3f5ea; color: #16733d; }
.chip.c2 { background: #fff2dc; color: #a45308; }
.chip.c3 { background: #f1e7fe; color: #7327b5; }
.chip.c4 { background: #fde7eb; color: #b3163a; }
.chip.c5 { background: #eceff3; color: #475467; }
.chip.plain { background: #f1f3f6; color: #344054; font-weight: 500; }
.compact { padding: 0; margin: 0; list-style: none; }
.compact li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; padding: .65rem .25rem; border-bottom: 1px solid var(--line); }
.compact li:last-child { border-bottom: 0; }
.compact li.link { cursor: pointer; }
.compact li.link:hover { background: color-mix(in srgb, var(--p) 5%, #fff); }
.compact .ctitle { font-weight: 700; }
.compact .meta { font-size: .86rem; }
.compact .meta .k { font-size: .74rem; color: var(--sub); }
.compact .acts { margin: 0 0 0 auto; }
.group-h { font-size: .8rem; color: var(--sub); margin: 1rem 0 .45rem; font-weight: 700; }
.list-tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
.list-tools .search { display: flex; flex: 1 1 240px; max-width: 380px; }
.list-tools .search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-right: 0; border-radius: 999px 0 0 999px; padding: .45rem .95rem; background: #fff; }
.list-tools .search button { border: 1px solid var(--line); border-radius: 0 999px 999px 0; background: #fff; padding: .45rem 1rem; color: var(--p); font-weight: 600; }
.list-tools select { border: 1px solid var(--line); border-radius: 999px; padding: .42rem .85rem; background: #fff; }

.acts { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .75rem; }
.abtn { border: 1px solid color-mix(in srgb, var(--p) 55%, #fff); color: var(--p); background: #fff; border-radius: calc(var(--r) * .7); padding: .42rem .9rem; font-weight: 600; font-size: .88rem; white-space: nowrap; }
.abtn:hover { background: color-mix(in srgb, var(--p) 7%, #fff); }
.abtn.main { background: var(--p); border-color: var(--p); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.abtn.main:hover { background: color-mix(in srgb, var(--p) 86%, #000); }
.abtn:disabled { opacity: .45; cursor: not-allowed; }
.tone-playful .abtn { border-radius: 999px; }
.form { display: grid; gap: .85rem; border-radius: var(--r); padding: 1.1rem 1.2rem; background: var(--card); box-shadow: var(--shadow); }
.form h3 { margin: 0; }
.form label { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; }
.form label .req, .form .fgroup .req { color: #c2410c; background: #fff1e6; font-size: .68rem; font-weight: 700; border-radius: 4px; padding: 0 .3rem; margin-left: .4rem; }
.form input, .form select, .form textarea { border: 1px solid var(--line); border-radius: calc(var(--r) * .6); padding: .55rem .7rem; background: #fff; font-weight: 400; font-size: .95rem; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid color-mix(in srgb, var(--p) 40%, #fff); border-color: var(--p); }
.form input[type=checkbox] { width: 1.15rem; height: 1.15rem; }
/* Choices to tap: a row of buttons, or day by day like a calendar. */
.form .fgroup { display: flex; flex-direction: column; gap: .35rem; font-size: .84rem; font-weight: 600; }
.choice .copts { display: flex; flex-wrap: wrap; gap: .4rem; }
.choice .copt { position: relative; display: inline-flex; }
.choice .copt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice .copt span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .35rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 500; font-size: .92rem; cursor: pointer; user-select: none; }
.choice .copt input:checked + span { background: var(--p); border-color: var(--p); color: #fff; font-weight: 700; }
.choice .copt input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--p) 45%, #fff); outline-offset: 2px; }
.choice.by-day { display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; padding-right: .2rem; }
.choice .cday { display: grid; grid-template-columns: 5.6rem 1fr; gap: .5rem; align-items: start; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); }
.choice .cday:last-child { border-bottom: 0; padding-bottom: 0; }
.choice .cday-d { padding-top: .55rem; font-weight: 700; font-size: .86rem; }
.form .fgroup.wide { grid-column: 1 / -1; }
/* Several days at once: a row of answers per day, with 「まとめて」 on top. */
.form .ferr[role=alert] { white-space: pre-line; }
.bulk .chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bulk .copt { position: relative; display: inline-flex; }
.bulk .copt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bulk .copt span { display: inline-flex; align-items: center; min-height: 2.4rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 500; font-size: .9rem; cursor: pointer; user-select: none; }
.bulk .copt input:checked + span { background: var(--p); border-color: var(--p); color: #fff; font-weight: 700; }
.bulk .copt input:focus-visible + span { outline: 2px solid color-mix(in srgb, var(--p) 45%, #fff); outline-offset: 2px; }
.bulk.grid { display: grid; gap: 0; max-height: 26rem; overflow-y: auto; border: 1px solid var(--line); border-radius: calc(var(--r) * .6); }
.bulk .bday { display: grid; grid-template-columns: 6.4rem 1fr; gap: .5rem; align-items: center; padding: .45rem .6rem; border-bottom: 1px solid var(--line); }
.bulk .bday:last-child { border-bottom: 0; }
.bulk .bday-d { font-weight: 700; font-size: .86rem; }
.bulk .bulk-all { position: sticky; top: 0; z-index: 1; background: color-mix(in srgb, var(--p) 8%, #fff); }
.bulk .copt-btn { border: 1px dashed var(--p); background: #fff; color: var(--p); border-radius: 999px; padding: .25rem .7rem; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.bulk .chips.bseg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .35rem; }
.bulk .chips.bseg .copt-btn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bulk .chips.bseg .copt span, .bulk .chips.bseg .copt-btn { width: 100%; justify-content: center; text-align: center; padding: .3rem .35rem; font-size: .84rem; line-height: 1.25; }
.bulk .chips.bseg .copt { display: flex; }
@media (max-width: 600px) { .bulk .bday { grid-template-columns: 1fr; gap: .3rem; } }
.form .abtn.main { padding: .6rem 1.4rem; font-size: .95rem; }
.form .ferr { color: var(--sb-err); font-size: .8rem; font-weight: 400; }
.form .ferr:empty { display: none; }
.form .fhelp { color: var(--sub); font-size: .78rem; font-weight: 400; }
.form .sim { font-size: .82rem; color: #5b3aa8; }
.card .form, .compact .form, .tbl .form, .b-detail .form { box-shadow: none; border: 1px solid var(--line); margin-top: .6rem; }
@media (min-width: 821px) {
  .b-form > .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; }
  .b-form > .form > :not(label):not(.fgroup), .b-form > .form > label.wide, .b-form > .form > .fgroup.wide { grid-column: 1 / -1; }
}
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .85rem; }
.stat { border-radius: var(--r); padding: .9rem 1rem; background: var(--card); box-shadow: var(--shadow); border-top: 3px solid var(--p); }
.stat .v { font-size: 1.75rem; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
.stat .l { font-size: .8rem; color: var(--sub); margin-top: .15rem; }
.links { display: flex; gap: .5rem; flex-wrap: wrap; }
.berr { color: var(--sb-err); background: var(--sb-err-bg); border-radius: 8px; padding: .5rem .7rem; font-size: .88rem; }
@media (max-width: 820px) {
  .app-head { padding: .6rem .8rem; }
  .app-nav { margin-left: 0; width: 100%; }
  .app-body { padding: 1rem .8rem 1.4rem; gap: .95rem; }
  .page-title, .blk h2 { font-size: 1.2rem; }
  .b-hero { padding: 1.2rem 1.1rem; }
  .b-hero h2 { font-size: 1.35rem; }
  .appframe .look-note .look-text { display: none; }
}
@media (max-width: 640px) {
  .dhead { flex-direction: column; align-items: stretch; }
  .dhead .imgph { width: auto; }
  .cards { grid-template-columns: 1fr; }
}

.bnote.src { background: #eef4ff; color: #2b4a7a; }

/* ---------- look directions: a chosen look overrides the standard tokens ---------- */
.app.look { --sub: color-mix(in srgb, var(--ink) 62%, var(--card)); --line: color-mix(in srgb, var(--ink) 13%, var(--card)); }
.app.look .app-head { background: var(--card); }
.app.look.head-tinted .app-head { background: color-mix(in srgb, var(--p0) 10%, var(--card)); }
.app.look.head-solid .app-head { background: var(--p); color: #fff; border-bottom: 0; }
.app.look.head-gradient .app-head { background: linear-gradient(120deg, var(--p), color-mix(in srgb, var(--p) 55%, var(--a))); color: #fff; border-bottom: 0; }
.app.look.head-solid .app-mark, .app.look.head-gradient .app-mark { background: rgba(255,255,255,.22); box-shadow: none; }
.app.look.head-solid .app-nav .tab, .app.look.head-gradient .app-nav .tab { color: rgba(255,255,255,.85); }
.app.look.head-solid .app-nav .tab:hover, .app.look.head-gradient .app-nav .tab:hover,
.app.look.head-solid .app-nav .tab.on, .app.look.head-gradient .app-nav .tab.on { background: rgba(255,255,255,.2); color: #fff; }
.app.look .tbl th { background: color-mix(in srgb, var(--p0) 4%, var(--card)); }
.app.look.cards-flat .b-list, .app.look.cards-flat .b-detail, .app.look.cards-flat .form, .app.look.cards-flat .stat { box-shadow: none; }
.app.look.cards-flat .card { border-color: transparent; background: color-mix(in srgb, var(--p0) 5%, var(--card)); }
.app.look.cards-outline .b-list, .app.look.cards-outline .b-detail, .app.look.cards-outline .form, .app.look.cards-outline .stat { box-shadow: none; border: 1px solid var(--line); }
.app.look.cards-outline .stat { border-top: 3px solid var(--p); }
.app.look.dens-compact .app-body { gap: .75rem; padding: 1rem 1rem 1.3rem; }
.app.look.dens-compact .b-list, .app.look.dens-compact .b-detail, .app.look.dens-compact .form { padding: .8rem .9rem; }
.app.look.dens-compact .card { padding: .7rem .8rem; }
.app.look.dens-compact .tbl th, .app.look.dens-compact .tbl td { padding: .45rem .55rem; }
.app.look.dens-airy .app-body { gap: 1.6rem; padding: 1.8rem 1.8rem 2.4rem; }
.app.look.dens-airy .b-list, .app.look.dens-airy .b-detail, .app.look.dens-airy .form { padding: 1.4rem 1.5rem; }
.app.look.dens-airy .card { padding: 1.1rem 1.2rem; }
.app.look.dens-airy .card .imgph { margin: -1.1rem -1.2rem .9rem; }
.app.look.hero-bold .b-hero { background: var(--p); color: #fff; }
.app.look.hero-bold .b-hero p { color: rgba(255,255,255,.88); }
.app.look.hero-bold .b-hero .abtn.main { background: #fff; color: var(--p); border-color: #fff; }
@media (min-width: 821px) {
  .app.look.hero-split .b-hero:has(> .imgph) { grid-template-columns: 1.15fr .85fr; align-items: center; column-gap: 1.6rem; }
  .app.look.hero-split .b-hero > .imgph { grid-column: 2; grid-row: 1 / span 3; min-height: 230px; }
  .app.look.hero-split .b-hero > :not(.imgph) { grid-column: 1; }
}
.app.look.btn-pill .abtn { border-radius: 999px; }
.app.look.btn-square .abtn { border-radius: 4px; }
/* the guide's next step, marked where it happens in the demo */
.form.next { outline: 2px solid var(--sb-accent); outline-offset: 4px; position: relative; }
.next-badge { display: inline-block; background: var(--sb-accent); color: #fff; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .55rem; margin-bottom: .35rem; }
.abtn.next { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-accent) 45%, transparent); animation: sb-next 1.6s ease-in-out 3; }
@keyframes sb-next { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sb-accent) 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .abtn.next { animation: none; } }
@media (prefers-reduced-motion: reduce) { .qcard { transition: none; } }

/* The demo keeps its own look: the few shell tokens it borrows, and the font it inherited, are
   pinned back to the neutral values it was designed with (also in the look thumbnails). */
.app {
  --sb-ink: #1d2330; --sb-sub: #5b6475; --sb-line: #dde1e8; --sb-accent: #2f5bd3; --sb-accent-ink: #ffffff; --sb-soft: #eef2fb;
  --sb-warn: #9a5b00; --sb-warn-bg: #fff4de; --sb-ok: #1d7a46; --sb-ok-bg: #e5f5ec; --sb-err: #b3261e; --sb-err-bg: #fdeceb;
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
}
.app .btn.back { border-radius: 8px; font-weight: inherit; text-decoration: none; }
.look-open { border: 0; background: transparent; color: var(--sb-ink); font-size: .75rem; font-weight: 600; padding: 0 0 0 .5rem; text-decoration: underline; text-decoration-color: var(--sb-link-line); text-underline-offset: 3px; cursor: pointer; }

.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; max-width: 420px; background: var(--sb-ink); color: #fff; padding: .7rem .95rem; border-radius: 12px; box-shadow: var(--sb-float); font-size: .92rem; }
.toast.err { background: var(--sb-err); }
.toast .sim { display: block; font-size: .82rem; opacity: .9; margin-top: .2rem; }
.drawer-toggle { display: none; }
.order-fab { display: none; }
.ik-compare { margin-top: .2rem; font-size: .88rem; color: var(--sb-sub); }
.ik-compare s { text-decoration-thickness: 1.5px; }
.ik-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .8rem 0 .4rem; }
.ik-cta .btn { padding-inline: 1.4rem; }
.ik-cta .muted { font-size: .82rem; }
.vc-pro { margin: .6rem 0; padding: .7rem .85rem; border-radius: 12px; background: var(--sb-sun-soft); border: 1px solid var(--sb-sun-line); }
.vc-pro p { margin: 0 0 .45rem; }
.go-note { margin: .35rem 0 0; font-size: .86rem; color: var(--sb-sub); text-align: center; }

/* popups from the header (floating: a soft shadow) */
.panel-pop { position: absolute; right: 1rem; top: 3.6rem; z-index: 40; width: min(440px, calc(100vw - 2rem)); max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; box-shadow: var(--sb-float); padding: .7rem 1.1rem 1rem; font-size: .92rem; }
.panel-pop h4 { margin: .7rem 0 .3rem; font-weight: 700; }
.panel-pop ul { margin: .2rem 0; padding-left: 1.2rem; }
.panel-pop li { margin: .15rem 0; }
.panel-pop .st { font-size: .74rem; font-weight: 700; padding: 0 .45rem; border-radius: 999px; background: var(--sb-soft); margin-right: .35rem; }
.panel-pop .real-warn { padding-left: 1.1rem; }
.panel-pop .real-warn li.block { color: #a4271b; font-weight: 700; }
.panel-pop .real-warn li.warn { color: #7a5600; }
.hint.real-block { color: #a4271b; font-weight: 700; }
.hint.real-warn { color: #7a5600; }

/* look panel (SMART BUILD side; floating) */
.look-panel { position: fixed; inset: 3.8rem 1rem 1rem auto; z-index: 45; width: min(980px, calc(100vw - 2rem)); overflow: auto; background: #fff; border: 1px solid var(--sb-line); border-radius: 18px; box-shadow: var(--sb-float); padding: 1rem 1.3rem 1.3rem; }
.look-top { display: flex; justify-content: space-between; align-items: center; }
.look-top h3 { margin: 0; font-weight: 700; }
.look-lead { margin: .3rem 0 .4rem; font-size: .92rem; font-weight: 600; color: var(--sb-ink); }
.look-ask { display: grid; gap: .45rem; margin: .6rem 0 1rem; }
.look-ask label { font-weight: 700; font-size: .92rem; }
.look-ask > input, .look-ref-url input { border: 1px solid var(--sb-line-input); border-radius: 10px; padding: .45rem .75rem; background: #fff; }
.look-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.look-panel .job { display: block; margin: .4rem 0 .8rem; }
.look-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .6rem; }
.look-card { display: grid; gap: .35rem; align-content: start; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; padding: .6rem; }
.look-card.on { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }
.look-name { font-weight: 700; }
.look-card .btn { justify-self: start; }
.look-thumb { position: relative; height: 250px; overflow: hidden; border-radius: 10px; border: 1px solid var(--sb-line); background: #f4f5f7; pointer-events: none; }
.look-thumb-inner { width: 1000px; transform-origin: top left; transform: scale(var(--s, .4)); }
.muted.small { font-size: .8rem; margin-top: 1rem; }
/* the reference screen (look panel, and the box shown while the first demo is made) */
.look-ref { display: grid; gap: .35rem; margin-bottom: .6rem; padding: .65rem .8rem; border: 1px dashed var(--sb-btn-line); border-radius: 12px; background: var(--sb-bg); }
.look-ref-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.look-ref-pick .muted { margin: 0; }
.look-ref-url { display: inline-flex; gap: .35rem; flex: 1 1 260px; min-width: 0; }
.look-ref-url input { flex: 1; min-width: 0; padding: .3rem .6rem; }
.look-ref-now { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.look-ref-now img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--sb-line); flex: none; }
.look-ref-label { flex: 1; min-width: 0; font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-ref p { margin: 0; }

/* ---------- phone: the conversation is a bottom sheet ---------- */
@media (max-width: 820px) {
  /* iPhone zooms the page into a text box whose letters are under 16px, and stays zoomed: every
     box to type in or pick from is 16px on a phone (pinch zoom is left as it is). */
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
  .ws { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ws-head { padding: .45rem .7rem calc(.45rem + 3px); gap: .45rem; }
  .ws-head .brand-word { display: none; }
  .ws-head .brand .smabee { width: 34px; }
  .ws-head .title { min-width: 0; padding-left: 0; font-size: .98rem; }
  .hmore { display: inline-flex; }
  .hacts { display: none; position: absolute; right: .7rem; top: calc(100% + 8px); z-index: 41; flex-direction: column; align-items: stretch; gap: .4rem; min-width: 12rem; padding: .55rem; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; box-shadow: var(--sb-float); }
  .hacts.open { display: flex; }
  .hacts .hbtn { justify-content: space-between; padding: .45rem .8rem; }

  .chat { position: fixed; inset: auto 0 0 0; z-index: 30; height: 70vh; height: 78dvh; overscroll-behavior: contain; border-right: 0; border-top: 1px solid var(--sb-line); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(31, 37, 68, .14); transform: translateY(calc(100% + 40px)); transition: transform .2s; }
  .ws.chat-open .chat { transform: translateY(0); }
  /* With the sheet open, pulling down closes it instead of reloading the page. */
  :root:has(.ws.chat-open) { overscroll-behavior-y: none; }
  .sheet-grip { display: block; flex: none; width: 40px; height: 5px; margin: .5rem auto 0; border-radius: 999px; background: var(--sb-btn-line); }
  .chat-head { padding: .3rem .9rem .5rem; }
  .chat-close { display: inline-flex !important; }
  .msgs { padding: .7rem .8rem .7rem; gap: .7rem; }
  .mrow .avatar { width: 34px; height: 34px; border-radius: 10px; }
  .mrow .avatar .smabee { width: 27px; }
  .first-try, .vcard .meta { display: none; }
  .job { margin: 0 .8rem .6rem; padding: .6rem .75rem; gap: .6rem; }
  .job .jm { width: 48px; height: 48px; border-radius: 12px; }
  .job .jm .smabee { width: 40px; }
  .job .steps li.done, .job .meanwhile { display: none; }
  .chat > .qslot { margin: 0 calc(.8rem - 3px) .5rem; }
  /* While a card is up, the making-it box shrinks to one line so the whole card fits. */
  .chat:has(> .qslot) .job { padding: .45rem .7rem; margin-bottom: .45rem; }
  .chat:has(> .qslot) .job .jm, .chat:has(> .qslot) .job .steps { display: none; }
  .chat:has(> .qslot) { height: 70vh; height: 90dvh; }
  .qcard { padding: .75rem .8rem .65rem; }
  .qbtns .btn { padding: .35rem .5rem; font-size: .88rem; }
  .composer { padding: .55rem .8rem .75rem; }
  .composer textarea { min-height: 3.2rem; }
  .drawer-toggle { display: inline-flex; align-items: center; gap: .4rem; position: fixed; right: .9rem; bottom: .9rem; z-index: 35; padding: .3rem 1.05rem .3rem .35rem; border-radius: 999px; background: #fff; color: var(--sb-ink); border: 1px solid var(--sb-line); box-shadow: var(--sb-float); font-weight: 700; }
  .drawer-toggle .smabee { width: 30px; }
  .ws.chat-open .drawer-toggle { display: none; }
  .order-fab { display: inline-flex; align-items: center; position: fixed; left: .9rem; bottom: .9rem; z-index: 35; max-width: calc(100vw - 9.5rem); padding: .6rem 1.05rem; border-radius: 999px; background: var(--sb-accent); color: var(--sb-accent-ink); border: 0; box-shadow: var(--sb-float); font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .order-fab[hidden], .ws.chat-open .order-fab { display: none; }

  .guide { padding: .5rem .6rem .4rem; font-size: .86rem; }
  .gface { width: 30px; height: 30px; }
  .gbubble { padding: .3rem .4rem .3rem .6rem; }
  .gacts .btn { padding: .18rem .55rem; font-size: .8rem; }
  .appframe { border-radius: 10px; }
  .frame-dots { display: none; }
  .demo-scroll { padding: .7rem .6rem 5rem; }
  .empty-demo { padding: 1.5rem .6rem 5rem; }
  .meanwhile-box { margin-top: 1rem; padding: .95rem .95rem 1rem; }
  .toast { left: .75rem; right: .75rem; bottom: 4.5rem; }
  .panel-pop { left: .6rem; right: .6rem; top: 3.3rem; width: auto; }
  .look-panel { inset: .5rem; width: auto; }
  .look-grid { grid-template-columns: 1fr; }

  .top-head { padding: .6rem 1rem calc(.6rem + 3px); }
  .top-head .scope, .resume .when, .resume .rlabel { display: none; }
  .start-page .start { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.5rem 1rem 2rem; }
  .start-page h1 { font-size: 1.65rem; }
  .scene { margin-top: 1rem; }
  .scene .smabee { width: 110px; }
  .scene .say { margin-bottom: 1.6rem; font-size: .92rem; }
  .start-card { padding: 1.1rem 1rem 1rem; border-radius: 18px; }
  .tiles { grid-template-columns: 1fr; }
  .start-card .actions .go { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .tile, .chat { transition: none; }
}

/* the start page, as simple as a search page */
.start-page.simple { min-height: 100vh; display: flex; flex-direction: column; }
.start-page.simple .top-head { border: 0; background: transparent; box-shadow: none; }
.start-page.simple .top-head::after { display: none; }
.start-simple { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: 9vh 16px 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-logo { width: min(340px, 78vw); height: auto; margin-bottom: 1.4rem; }
.start-simple .hello { display: flex; align-items: center; gap: .55rem; margin: 0 0 .8rem; color: var(--sb-sub); font-size: .98rem; text-align: left; }
.ask-box { position: relative; width: 100%; background: #fff; border: 1px solid var(--sb-line-input); border-radius: 24px; padding: .7rem 1.1rem .7rem; text-align: left; transition: box-shadow .15s ease, border-color .15s ease; }
.ask-box:focus-within { border-color: var(--sb-accent); box-shadow: 0 4px 16px rgba(90, 51, 96, .14); }
.ask-box textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-size: 1.05rem; line-height: 1.6; min-height: 3.2em; max-height: 12em; padding: 0 2.4rem 0 0; box-shadow: none; }
/* The kinds to pick from, small, inside the box under what is written. */
.ask-kinds { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.ask-kinds .tile { padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; gap: .35rem; background: var(--sb-bg, #faf8fb); }
.ask-kinds .tile .sq { width: 7px; height: 7px; border-radius: 50%; }
.ask-kinds .tile.on { background: var(--sb-sun-soft); }
.start-simple .hello.asking { color: var(--sb-ink); font-weight: 700; }
/* On a phone they stay one line that slides sideways (the last one fades out to show there is more). */
@media (max-width: 600px) {
  .ask-kinds { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -1.1rem; padding-right: 1.6rem;
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  .ask-kinds::-webkit-scrollbar { display: none; }
  .ask-kinds .tile { flex: none; white-space: nowrap; font-size: .76rem; padding: .18rem .55rem; }
}
.ask-box .mic { position: absolute; right: .55rem; top: .55rem; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; color: var(--sb-accent); }
.ask-box .mic:hover { background: var(--sb-hover); }
.ask-box .mic .mic-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.start-simple .go-row { margin: .8rem 0 .2rem; }
.start-simple .go { padding: .65rem 2rem; border-radius: 999px; font-size: 1.02rem; }
.start-simple .error-text { margin: .3rem 0 0; }
.start-simple .privacy { display: flex; align-items: center; justify-content: center; gap: .35rem; margin: 1.2rem 0 0; color: var(--sb-sub); font-size: .8rem; }
.start-simple .projects { width: 100%; margin-top: 2rem; text-align: left; }
.start-page.simple .start-foot { text-align: center; padding: 1rem; font-size: .78rem; }

.tagline { margin: -.4rem 0 1.6rem; font-size: 1.12rem; font-weight: 600; letter-spacing: .04em; color: var(--sb-ink); text-align: center; }
.tagline .x { color: var(--sb-coral); font-weight: 700; margin: 0 .1em; }
.gate .tagline { margin: .4rem 0 1rem; font-size: .95rem; }
.start-simple .hero-logo { margin-bottom: 1rem; }
.gate .brand { display: flex; justify-content: center; }

/* start page header: language, sign-in */
.start-page.simple .top-head { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; position: relative; }
.lang-wrap { display: inline-flex; align-items: center; gap: .3rem; color: var(--sb-sub); }
.lang-wrap select { border: 1px solid var(--sb-btn-line); background: #fff; border-radius: 999px; padding: .25rem .6rem; font-size: .85rem; color: var(--sb-ink); }
.top-head .btn.small { border-radius: 999px; }
.mine-pop { position: absolute; top: calc(100% + 4px); right: 1rem; z-index: 30; width: min(320px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--sb-line); border-radius: 12px; box-shadow: var(--sb-float); padding: .35rem; }
.mine-pop a { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 8px; color: var(--sb-ink); text-decoration: none; }
.mine-pop a:hover { background: var(--sb-hover); }
.mine-pop a .muted { margin: 0; font-size: .78rem; }
.mine-pop > p { margin: .4rem .6rem; }

/* the service in three steps */
.flow { list-style: none; display: flex; align-items: flex-start; justify-content: center; gap: .4rem; margin: 2rem 0 0; padding: 0; width: min(680px, calc(100vw - 32px)); }
.flow-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; }
.flow-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sb-soft); color: var(--sb-accent); margin-bottom: .25rem; }
.flow-step:nth-of-type(1) .flow-ic { background: var(--sb-coral-soft); color: #B4513D; }
.flow-step b { font-size: .95rem; color: var(--sb-ink); }
.flow-step small { font-size: .78rem; color: var(--sb-sub); line-height: 1.4; }
.flow-arrow { flex: none; color: var(--sb-line-input); margin-top: 14px; }
.soon { font-size: .68rem; color: var(--sb-sub); border: 1px solid var(--sb-btn-line); border-radius: 999px; padding: 0 .45rem; margin-top: .15rem; background: #fff; }
@media (max-width: 480px) { .flow { gap: .2rem; } .flow-step b { font-size: .8rem; white-space: nowrap; } .flow-step small { font-size: .7rem; } .flow-ic { width: 40px; height: 40px; } .flow-arrow { margin-top: 10px; } }

/* sign-in / sign-up dialog */
.modal-wrap { position: fixed; inset: 0; z-index: 50; background: rgba(47, 48, 59, .35); display: grid; place-items: center; padding: 16px; }
.modal { position: relative; width: min(420px, 100%); background: #fff; border-radius: 16px; box-shadow: var(--sb-float); padding: 1.4rem 1.4rem 1.2rem; }
.modal .brand { display: flex; justify-content: center; margin-bottom: .6rem; }
.modal .brand .brand-logo { height: 30px; }
.modal h2 { margin: .2rem 0 .6rem; font-size: 1.15rem; text-align: center; }
.modal-x { position: absolute; top: .5rem; right: .6rem; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.4rem; color: var(--sb-sub); border-radius: 50%; }
.modal-x:hover { background: var(--sb-hover); }
.login-form { display: grid; gap: .6rem; }
.login-form p { margin: 0; }
.login-form input[type=password], .login-form input[type=text] { border: 1px solid var(--sb-line-input); border-radius: 10px; padding: .6rem .75rem; font-size: 1rem; }
.modal .row { display: flex; gap: .5rem; justify-content: center; margin-top: .8rem; }
.start-page.simple .start-foot { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

/* the service in three steps, as cards */
.steps { width: min(820px, calc(100vw - 32px)); margin: 2.6rem 0 0; }
.steps-label { margin: 0 0 .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--sb-coral); text-align: center; }
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: step; }
.step-card { position: relative; background: #fff; border: 1px solid var(--sb-line); border-radius: 18px; padding: .7rem .7rem 1rem; text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.step-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(90, 51, 96, .10); }
.step-card + .step-card::before { content: ""; position: absolute; left: -1.25rem; top: 58px; width: .9rem; height: .9rem; border-top: 2px solid var(--sb-line-input); border-right: 2px solid var(--sb-line-input); transform: rotate(45deg); opacity: .55; }
.step-pic { display: block; width: 100%; height: auto; border-radius: 12px; }
.step-text { padding: .75rem .35rem 0; display: grid; gap: .2rem; }
.step-no { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--sb-accent); }
.s-demo .step-no { color: #B4513D; }
.step-text b { font-size: 1.02rem; color: var(--sb-ink); line-height: 1.45; }
.step-text small { font-size: .84rem; color: var(--sb-sub); line-height: 1.55; }
.step-card .soon { font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: var(--sb-accent); background: var(--sb-soft); border: 0; border-radius: 999px; padding: .05rem .5rem; margin: 0; }
@media (max-width: 640px) {
  .steps-list { grid-template-columns: 1fr; gap: .7rem; }
  .step-card { display: grid; grid-template-columns: 112px 1fr; gap: .8rem; align-items: center; padding: .6rem; }
  .step-card + .step-card::before { display: none; }
  .step-text { padding: 0; }
  .step-text b { font-size: .95rem; }
  .step-text small { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .step-card { transition: none; } .step-card:hover { transform: none; } }

/* ---------- 入口の判定 (受付の判定) ---------- */
.intake { margin: .4rem .8rem; padding: .7rem .85rem; background: var(--sb-panel); border: 1px solid var(--sb-line); border-radius: 12px; font-size: .9rem; line-height: 1.6; max-height: 60vh; overflow-y: auto; }
.intake.ok { border-left: 4px solid var(--sb-accent); }
.intake.check { border-left: 4px solid #C9962B; }
.intake.out { border-left: 4px solid var(--sb-coral); }
.intake .ik-head { display: flex; align-items: center; gap: .5rem; }
.intake .ik-head b { flex: 1; font-size: .98rem; }
.intake .ik-mark { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--sb-soft); color: var(--sb-accent); font-weight: 800; flex: none; }
.intake.check .ik-mark { background: var(--sb-warn-bg); color: var(--sb-warn); }
.intake.out .ik-mark { background: var(--sb-coral-soft); color: #9B3B28; }
.intake p { margin: .35rem 0; }
.intake .ik-sum { color: var(--sb-sub); }
.intake .ik-label { display: inline-block; margin-right: .45rem; font-size: .78rem; font-weight: 700; color: var(--sb-sub); }
.intake .ik-reasons { margin: .4rem 0; padding-left: 1.1rem; }
.intake .ik-reasons li { margin: .25rem 0; }
.intake .ik-alt { color: var(--sb-sub); font-size: .84rem; }
.intake .ik-price { margin: .5rem 0; padding: .5rem .65rem; background: var(--sb-soft); border-radius: 10px; }
.intake .ik-price b { font-size: 1.15rem; }
.intake .ik-price .muted { font-size: .8rem; }
.intake .ik-inc { font-size: .84rem; }
.intake .ik-qs { margin: .55rem 0; padding-top: .45rem; border-top: 1px solid var(--sb-line-soft); }
.intake .ik-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .6rem; margin: .3rem 0; }
.intake .ik-yn { display: flex; gap: .3rem; }
.intake .ik-answers { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0; font-size: .8rem; }
.intake .ik-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .2rem .05rem .55rem; border: 1px solid var(--sb-line); border-radius: 999px; background: var(--sb-hover); }
.intake .ik-x { border: 0; background: none; cursor: pointer; color: var(--sb-sub); font-size: .9rem; padding: 0 .3rem; }
.intake .ik-done { color: var(--sb-accent); font-weight: 700; }
.intake .ik-note { font-size: .76rem; margin-top: .5rem; }
.intake .ik-form { display: grid; gap: .45rem; margin-top: .5rem; }
.intake .ik-f { display: grid; gap: .15rem; font-size: .84rem; }
.intake .ik-f input, .intake .ik-f textarea { font: inherit; padding: .4rem .5rem; border: 1px solid var(--sb-line-input); border-radius: 8px; }
.intake .ik-f .req { margin-left: .35rem; font-size: .72rem; color: #9B3B28; }
.intake .ik-err { color: #9B3B28; font-size: .78rem; min-height: 0; }
.intake.compact { padding: .3rem .5rem; max-height: none; }
.intake .ik-line { display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; color: inherit; }
.intake .ik-line .ik-mark { width: 1.4rem; height: 1.4rem; font-size: .85rem; }
.intake .ik-line .ik-more { margin-left: auto; font-size: .8rem; color: var(--sb-sub); text-decoration: underline; }
.intake .ik-line .ik-done { font-size: .78rem; }
.intake.reading .ik-mark { animation: ikpulse 1.2s ease-in-out infinite; }
@keyframes ikpulse { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .intake.reading .ik-mark { animation: none; } }
.intake .ik-opts { display: flex; flex-wrap: wrap; gap: .3rem; }
.intake .ik-scale { flex-direction: column; align-items: flex-start; }
.intake .ik-basis { margin-top: .3rem; font-size: .78rem; color: var(--sb-sub); }
.intake .ik-basis summary { cursor: pointer; }
.intake .ik-plan { margin: .5rem 0; padding: .5rem .65rem; border: 1px dashed var(--sb-line); border-radius: 10px; }
.intake .ik-tool { font-size: .84rem; }
.qcard .qown { display: flex; gap: .4rem; margin-top: .55rem; }
.qcard .qown[hidden] { display: none; }
.qcard .qown input { flex: 1; min-width: 0; font: inherit; font-size: .92rem; padding: .45rem .7rem; border: 1px solid var(--sb-line-input); border-radius: 10px; user-select: text; }
.qcard .qfoot { display: flex; justify-content: center; gap: 1.2rem; flex-wrap: wrap; }
.qcard .qopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .6rem; }
.qcard .qopts .btn { justify-content: center; }
.hbtn.order { border-color: var(--sb-accent); color: var(--sb-accent); }
.hbtn.order b { margin-left: .2rem; }
.panel-pop .ik-price { margin: .5rem 0; padding: .55rem .7rem; background: var(--sb-soft); border-radius: 10px; }
.panel-pop .ik-price b { font-size: 1.2rem; }
.panel-pop .ik-label { display: inline-block; margin-right: .45rem; font-size: .78rem; font-weight: 700; color: var(--sb-sub); }
.panel-pop .ik-basis { margin-top: .3rem; font-size: .8rem; color: var(--sb-sub); }
.panel-pop .ik-plan { margin: .5rem 0; padding: .5rem .65rem; border: 1px dashed var(--sb-line); border-radius: 10px; }
.panel-pop .ik-inc, .panel-pop .ik-tool { font-size: .86rem; margin: .35rem 0; }
.panel-pop .ik-qs { margin: .6rem 0; padding-top: .5rem; border-top: 1px solid var(--sb-line-soft); }
.panel-pop .ik-q { display: flex; flex-direction: column; gap: .3rem; margin: .45rem 0; font-size: .88rem; }
.panel-pop .ik-opts { display: flex; flex-wrap: wrap; gap: .3rem; }
.panel-pop .ik-answers { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0; font-size: .8rem; }
.panel-pop .ik-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .2rem .05rem .55rem; border: 1px solid var(--sb-line); border-radius: 999px; background: var(--sb-hover); }
.panel-pop .ik-x { border: 0; background: none; cursor: pointer; color: var(--sb-sub); padding: 0 .3rem; }
.panel-pop .ik-done { color: var(--sb-accent); font-weight: 700; }
.panel-pop .ik-note { font-size: .76rem; margin-top: .6rem; }
.panel-pop .ik-form { display: grid; gap: .45rem; margin-top: .5rem; }
.panel-pop .ik-f { display: grid; gap: .15rem; font-size: .84rem; }
.panel-pop .ik-f input, .panel-pop .ik-f textarea { font: inherit; padding: .4rem .5rem; border: 1px solid var(--sb-line-input); border-radius: 8px; }
.panel-pop .ik-f .req { margin-left: .35rem; font-size: .72rem; color: #9B3B28; }
.panel-pop .ik-err { color: #9B3B28; font-size: .78rem; }
.panel-pop .ik-optional summary { cursor: pointer; font-size: .82rem; color: var(--sb-sub); }
.panel-pop .ik-optional[open] { display: grid; gap: .45rem; }
.fb-form { display: grid; gap: .7rem; }
.fb-form h4 { margin: 0; }
.fb-q { display: grid; gap: .35rem; font-size: .9rem; }
.fb-q textarea { font: inherit; padding: .45rem .55rem; border: 1px solid var(--sb-line-input); border-radius: 8px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { border: 1px solid var(--sb-btn-line); background: var(--sb-panel); color: var(--sb-ink); border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .86rem; cursor: pointer; }
.chip:hover { background: var(--sb-hover); }
.chip.on { background: var(--sb-accent); border-color: var(--sb-accent); color: var(--sb-accent-ink); }
.panel-pop .fb-inline { display: grid; gap: .35rem; margin: .6rem 0; padding-top: .5rem; border-top: 1px solid var(--sb-line-soft); }
.panel-pop .fit-form { display: grid; gap: .45rem; margin: .6rem 0; padding: .55rem .65rem; border: 1px solid var(--sb-line); border-radius: 10px; }
.panel-pop .fit-list { display: grid; gap: .25rem; }
.panel-pop .fit-row { display: grid; grid-template-columns: auto 1fr auto; gap: .45rem; align-items: center; font-size: .88rem; }
.panel-pop .fit-total { font-weight: 700; display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.panel-pop .ik-scoped { margin: .2rem 0 .4rem; font-size: .84rem; color: var(--sb-accent); font-weight: 700; }
.panel-pop .pay { display: grid; gap: .35rem; margin: .6rem 0; padding: .55rem .65rem; background: var(--sb-hover); border-radius: 10px; }
.panel-pop .pay-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .86rem; }
.panel-pop .pay-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; }
.panel-pop .pay-list .muted { grid-column: 1; font-size: .78rem; }
.panel-pop .pay-amt { grid-column: 2; grid-row: 1; white-space: nowrap; font-weight: 700; }
.panel-pop .pay .btn { justify-self: start; }
/* The top page says first what the service is: business systems and web services, built for you. */
.start-simple .kicker { margin: 0 0 1rem; padding: .15rem .8rem; border-radius: 999px; background: var(--sb-soft); color: var(--sb-accent); font-weight: 700; font-size: .86rem; letter-spacing: .04em; }
.start-simple .lead { margin: -.8rem 0 1.4rem; max-width: 34rem; color: var(--sb-sub); font-size: .92rem; line-height: 1.7; }
.start-simple .examples { width: 100%; margin-top: 1.6rem; }
.start-simple .ex-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.start-simple .ex-chip { border: 1px solid var(--sb-btn-line); background: var(--sb-panel); color: var(--sb-ink); border-radius: 999px; padding: .32rem .85rem; font: inherit; font-size: .86rem; cursor: pointer; }
.start-simple .ex-chip:hover { background: var(--sb-hover); border-color: var(--sb-accent); }
.hbtn.save { border-color: var(--sb-accent); background: var(--sb-accent); color: var(--sb-accent-ink); }
.hbtn.save:hover { background: var(--sb-accent-hover); }
/* On a phone the box to write in comes up into the first screen. */
@media (max-width: 600px) {
  .start-simple { padding-top: 4vh; }
  .start-simple .hero-logo { width: min(240px, 62vw); margin-bottom: .6rem; }
  .start-simple .kicker { margin-bottom: .7rem; }
  .start-simple .tagline { margin-bottom: 1rem; font-size: 1rem; }
  .start-simple .hello { margin-bottom: .5rem; }
}

/* 作る前の確認: the questions before the first demo, in the middle of the screen */
.deep { width: 100%; max-width: 560px; margin: 0 auto; display: grid; gap: .9rem; text-align: left; }
.deep-head { display: flex; align-items: center; gap: .6rem; }
.deep-head > div { display: grid; }
.deep-head small { color: var(--sb-sub); }
.deep-card .qopts .btn.on { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }
.deep-card .qopts .btn.on::after { content: " ✓"; color: var(--sb-ok); font-weight: 800; }
.deep-own { display: flex; gap: .4rem; margin-top: .3rem; }
.deep-own input { flex: 1; min-width: 0; font: inherit; padding: .45rem .7rem; border: 1px solid var(--sb-line-input); border-radius: 10px; }
.deep-known { background: #fff; border: 1px solid var(--sb-line); border-radius: 12px; padding: .6rem .8rem; }
.deep-known ul { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .15rem; font-size: .9rem; }
.deep-foot { display: flex; justify-content: center; }
.deep-card .deep-decide { justify-self: start; margin-top: .2rem; }

/* デモの設計書: one card before the first demo */
.dd { max-width: 680px; }
.dd-card { background: #fff; border: 1px solid var(--sb-line); border-radius: 16px; padding: 1.1rem 1.2rem 1rem; color: var(--sb-ink); display: grid; gap: .8rem; }
.dd-title { margin: 0; font-size: 1.3rem; line-height: 1.35; }
.dd-line { margin: -.4rem 0 0; color: var(--sb-sub); }
.dd-sec h3 { margin: 0 0 .25rem; font-size: .78rem; letter-spacing: .06em; color: var(--sb-sub); }
.dd-sec p { margin: 0; }
.dd-sec ul, .dd-sec ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .2rem; font-size: .93rem; }
.dd-screens li > div { color: var(--sb-sub); font-size: .9rem; }
.dd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.dd-full summary { cursor: pointer; color: var(--sb-accent); font-weight: 700; font-size: .92rem; }
.dd-doc { white-space: pre-wrap; font-size: .9rem; line-height: 1.75; margin-top: .5rem; max-height: 60vh; overflow: auto; padding: .7rem .8rem; background: var(--sb-bg); border-radius: 10px; }
.dd-verdict { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.dd-verdict .btn[aria-pressed="true"] { background: var(--sb-sun-soft); border-color: var(--sb-sun-line); }
.dd-own { display: grid; gap: .35rem; }
.dd-own[hidden] { display: none; }
.dd-own-q { font-weight: 700; color: var(--sb-ink); }
.dd-own-row { display: flex; gap: .4rem; }
.dd-own-row input { flex: 1; min-width: 0; font: inherit; padding: .5rem .7rem; border: 1px solid var(--sb-line-input); border-radius: 10px; }
@media (max-width: 560px) { .dd-two { grid-template-columns: 1fr; } .dd-card { padding: .9rem .85rem; } .dd-verdict .dd-yes { flex-basis: 100%; } }

/* 本番にすると: the smallest start first, then what more would add */
.ik-start { font-size: .9rem; margin-top: .15rem; }
.ik-addons { margin: .8rem 0; display: grid; gap: .35rem; }
.ik-addons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ik-addons li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem .6rem; border: 1px solid var(--sb-line); border-radius: 10px; background: #fff; font-size: .9rem; }
.ik-addons li b { white-space: nowrap; color: var(--sb-accent); }

/* A page a model wrote from the brief (screen.js): it brings its own spacing and colors. */
.app-body.screen-body { padding: 0; gap: 0; }
.screen-body > .back { margin: .8rem 1rem 0; align-self: flex-start; }
.screen-body > .berr { margin: .8rem 1rem 0; }
.screen-host { display: block; }
/* A whole-page screen (its own header and footer): the window is as wide as the demo area allows. */
.appframe.full:not(.as-phone) { max-width: 1440px; }
.appframe.full .app.site { background: #fff; }
.appframe.full .frame-label > .back { padding: .15rem .6rem; font-size: .76rem; min-height: 0; }
.vc-aim { display: flex; gap: .6rem; align-items: baseline; margin: .55rem 0; padding: .55rem .75rem; border-radius: 10px;
  background: color-mix(in srgb, var(--sb-accent, #6d4aff) 7%, #fff); font-size: .92rem; line-height: 1.55; }
.vc-aim-label { flex: none; font-size: .74rem; font-weight: 700; color: var(--sb-accent, #6d4aff); }
.map-all { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .4rem 0 .8rem; }
.vc-design { margin: .6rem 0; padding: .65rem .8rem; border: 1px solid var(--line, #e6e3ea); border-radius: 12px; background: #fff; font-size: .9rem; }
.vc-design .vd-title { font-weight: 700; margin-bottom: .25rem; }
.vc-design .vd-lead { margin: .2rem 0 .4rem; }
.vc-design ul { margin: 0 0 .4rem; padding: 0; list-style: none; }
.vc-design li { display: flex; gap: .4rem; line-height: 1.5; }
.vc-design li.open { color: #8a5a00; }
.vc-design .vd-mark { flex: none; width: 1.1em; }
.qcard .qfoot .qskip { margin: .55rem 0 0; }

/* Asking is always there once a demo is made: in the header, under the demo, on a phone's button. */
.hbtn.consult { border-color: var(--sb-accent); background: var(--sb-accent); color: var(--sb-accent-ink); }
.demo-consult { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  max-width: 1100px; margin: 18px auto 28px; padding: 14px 18px; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; }
.demo-consult > div { display: grid; gap: .15rem; min-width: 0; }
.demo-consult b { font-size: .98rem; }
.demo-consult .muted { font-size: .84rem; }
.demo-consult.done { justify-content: flex-start; color: var(--sb-ok); font-weight: 600; font-size: .9rem; }
@media (max-width: 820px) { .demo-consult { margin: 14px 12px 84px; } .demo-consult .btn { width: 100%; } }
/* What changes between the demo and the real thing. */
.ik-vs { margin: .4rem 0 .8rem; padding: .6rem .75rem; background: var(--sb-soft); border-radius: 10px; }
.ik-vs dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; margin: .35rem 0 0; font-size: .84rem; }
.ik-vs dt { font-weight: 700; }
.ik-vs dd { margin: 0; color: var(--sb-sub); }
@media (max-width: 520px) { .ik-vs dl { grid-template-columns: 1fr; gap: .1rem; } .ik-vs dd { margin-bottom: .3rem; } }
.ik-premise { margin-top: .2rem; font-size: .84rem; color: var(--sb-sub); }
.ik-carry { margin: 0 0 .3rem; font-size: .84rem; }

/* On a PC the header keeps one row: the rest of the menu opens under 「その他」. */
@media (min-width: 821px) { .hacts { position: relative; } }
@media (min-width: 821px) and (max-width: 1360px) { .hacts { gap: .3rem; } .hacts > .hbtn { padding: .26rem .55rem; font-size: .8rem; } .ws-head { gap: .45rem; } }
.hsubs { display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 41; flex-direction: column; align-items: stretch; gap: .4rem;
  min-width: 11rem; padding: .55rem; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; box-shadow: var(--sb-float); }
.hsubs.open { display: flex; }
.hsubs .hbtn { justify-content: flex-start; padding: .45rem .8rem; }
@media (max-width: 820px) {
  /* On a phone everything is in ⋯ already. */
  .hsub-toggle { display: none !important; }
  .hsubs, .hsubs.open { display: contents; }
}

/* A list laid out as a month: a table of who by day, or a month of days. */
.cal-h { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .6rem; }
.cal-h strong { font-size: 1rem; min-width: 7.5em; text-align: center; }
.cal-m th, .cal-m td { padding: .3rem .25rem; text-align: center; vertical-align: top; min-width: 2.6rem; }
.cal-m th.cal-lane { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; min-width: 7em; white-space: nowrap; }
.cal-m .cal-d .dw { font-size: .68rem; font-weight: 500; }
.cal-m .we, .cal-c.we { background: #f7f8fb; }
.cal-m .td, .cal-c.td { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--p) 45%, transparent); }
.cal-r { font-size: .72rem; line-height: 1.25; border-radius: 6px; padding: .15rem .3rem; margin: .1rem 0; background: color-mix(in srgb, var(--p) 10%, #fff); white-space: nowrap; }
.cal-r.link { cursor: pointer; }
.cal-r.cont { color: transparent; border-radius: 0 6px 6px 0; margin-left: -.3rem; }
.cal-r .acts { margin-top: .15rem; }
.cal-m .cal-r .acts { display: none; }
.cal-m .cal-r.open .acts { display: flex; flex-direction: column; gap: .15rem; }
.cal-m .cal-r .acts .badge { display: none; }
.cal-m tfoot td.num { text-align: center; color: var(--sub); font-size: .75rem; }
.cal-r .abtn { font-size: .68rem; padding: .1rem .35rem; }
.cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-w { font-size: .72rem; color: var(--sub); text-align: center; padding: .2rem 0; }
.cal-c { min-height: 4.2rem; border: 1px solid var(--line); border-radius: 6px; padding: .2rem; overflow: hidden; }
.cal-c.out { border-color: transparent; }
.cal-n { font-size: .72rem; color: var(--sub); }

/* Many days of a month answered at once: choose an answer, tap days. */
.dcal { display: grid; gap: .5rem; }
.dcal-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dcal .chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dcal .copt-btn { border: 1px solid var(--line); background: #fff; color: var(--ink, inherit); border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; min-height: 2.2rem; }
.dcal [data-fill] { border-style: dashed; color: var(--p); border-color: color-mix(in srgb, var(--p) 55%, #fff); }
.dcal .copt-btn[aria-pressed="true"] { background: var(--p); color: #fff; border-color: var(--p); }
.dcal-g .dday { min-height: 3.2rem; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; background: #fff; cursor: pointer; font: inherit; text-align: left; }
.dcal-g .dday[disabled] { opacity: .4; cursor: default; }
.dcal-g .dday[aria-pressed="true"] { background: color-mix(in srgb, var(--p) 14%, #fff); border-color: var(--p); }
.dcal-g .dlab { font-size: .72rem; font-weight: 700; color: var(--p); }