/* Web apps use the gallery's existing cards, heading, tabs and flow layouts. */
body[data-list=webapps] .page-heading{display:none}
.webapp-detail>.back{display:inline-block;margin-bottom:24px;color:inherit}
.webapp-search{display:flex;align-items:center;gap:16px;margin:16px 0 24px;font-size:14px}
.webapp-search input{width:280px;max-width:100%;padding:12px 16px;border:0;border-radius:12px;background:var(--webapp-surface,#f5f5f5);color:inherit;font:inherit}
.webapp-note{color:var(--webapp-muted,#737373);font-size:14px;line-height:1.6;margin:12px 0 20px}
.webapp-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0;font-size:14px}
.webapp-pagination a{color:inherit}
.webapp-detail .website-flow{scroll-margin-top:180px}
.webapp-detail .website-flow-steps a{color:inherit}
:root[data-theme=dark]{--webapp-surface:#1d1d1d;--webapp-muted:#a3a3a3}
@media(max-width:719px){.webapp-search{align-items:stretch;flex-direction:column;gap:8px}.webapp-search input{width:100%;box-sizing:border-box}.webapp-detail .site-tabs-main{padding-left:0;flex-basis:100%}}


body[data-list=webapps] .site-label-icon,.webapp-detail .site-icon,.webapp-detail .site-icon>span{color:#fff!important}

.webapp-screens .cs-card-clip{object-fit:cover;object-position:top}
.webapp-sheet .cs-toolbar[hidden],.webapp-sheet .webapp-search[hidden]{display:none}
.webapp-stage{position:relative;max-height:620px}
.webapp-static-screen{width:100%;height:auto;object-fit:contain;object-position:top}
.webapp-component-popup .cs-component-visual{height:100%;min-height:350px;overflow:auto}
.webapp-component-popup .cs-component-visual iframe{position:static;width:100%;height:100%;min-height:350px;border:0;transform:none;background:#fff}
.webapp-component-popup h2{overflow-wrap:anywhere}
.webapp-sheet [data-components]{max-height:420px;overflow:auto;padding:4px}
.webapp-sheet [data-components]>button{overflow-wrap:anywhere}
.webapp-sheet .cs-help{min-height:18px}

/* 会社について: the company behind the app. A soft surface, no outline (AGENTS: containers read by their fill). */
.webapp-company{max-width:880px;margin:-4px 0 32px;padding:24px 28px 22px;border-radius:20px;background:var(--webapp-surface,#f5f5f5)}
.webapp-company h2{margin:0 0 18px;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--webapp-muted,#737373)}
/* Six tracks so each row fills: 創業 + 創業者, 拠点 + 従業員数, then 推定売上 and 資金調達 side by side. */
.webapp-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 32px;margin:0}
.webapp-fact{grid-column:span 2}
.webapp-fact:is([data-fact=founders],[data-fact=hq]){grid-column:span 4}
.webapp-fact:is([data-fact=revenue],[data-fact=funding]){grid-column:span 3}
.webapp-fact dt{margin:0 0 4px;font-size:13px;line-height:18px;color:var(--webapp-muted,#737373)}
.webapp-fact dd{display:flex;flex-direction:column;gap:2px;margin:0}
.webapp-fact dd>span{font-size:16px;line-height:24px;font-weight:600}
.webapp-fact dd>small{font-size:12px;line-height:17px;color:var(--webapp-muted,#8a8a8a)}
.webapp-sources{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:20px 0 0;font-size:12px;line-height:18px;color:var(--webapp-muted,#737373)}
.webapp-sources-label{font-weight:600;margin-right:4px}
.webapp-sources a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.webapp-sources a:hover{color:var(--pb-fg,#141414)}
@media(max-width:760px){.webapp-company{padding:20px}.webapp-facts{grid-template-columns:minmax(0,1fr);gap:16px}.webapp-facts>.webapp-fact{grid-column:auto}}

/* コード tab (webapp-code.js): list of screens and shared files | the open item split into HTML / CSS / JavaScript.
   Surfaces and spacing, no outlines (AGENTS: containers read by their fill); focus rings stay. */
.wc{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;margin:8px 0 48px;align-items:start}
.wc[hidden]{display:none}
.wc-side{position:sticky;top:calc(var(--tb-nav-h,72px) + 16px);display:flex;flex-direction:column;max-height:calc(100vh - var(--tb-nav-h,72px) - 40px);border-radius:16px;background:var(--webapp-surface,#f5f5f5);overflow:hidden}
.wc-search{display:block;padding:12px}
.wc-search input{box-sizing:border-box;width:100%;padding:10px 12px;border:0;border-radius:10px;background:var(--webapp-field,#fff);color:inherit;font:inherit;font-size:14px}
.wc-list{overflow:auto;padding:0 8px 12px}
.wc-list section+section{margin-top:16px}
.wc-list h4{display:flex;justify-content:space-between;margin:0 8px 6px;font-size:12px;line-height:18px;font-weight:600;letter-spacing:.04em;color:var(--webapp-muted,#737373)}
.wc-list h4 small{font-weight:400}
.wc-list [data-wc-item],.wc-more{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;padding:7px 8px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}
.wc-list [data-wc-item] span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-list [data-wc-item]:hover,.wc-more:hover{background:color-mix(in srgb,currentColor 7%,transparent)}
.wc-list [data-wc-item][aria-current=true]{background:color-mix(in srgb,currentColor 12%,transparent);font-weight:600}
.wc-more{color:var(--webapp-muted,#737373);justify-content:center}
.wc-none{margin:0 8px;font-size:12px;color:var(--webapp-muted,#737373)}
.wc-main{min-width:0;border-radius:16px;background:var(--webapp-surface,#f5f5f5);overflow:hidden}
.wc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 8px}
.wc-kind{display:block;font-size:12px;line-height:18px;color:var(--webapp-muted,#737373)}
.wc-title{margin:2px 0 0;font-size:18px;line-height:26px;overflow-wrap:anywhere}
.wc-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.wc-btn{padding:8px 14px;border:0;border-radius:999px;background:color-mix(in srgb,currentColor 8%,transparent);color:inherit;font:inherit;font-size:13px;line-height:18px;cursor:pointer}
.wc-btn:disabled{opacity:.45;cursor:not-allowed}
.wc-btn[aria-pressed=true]{background:color-mix(in srgb,currentColor 16%,transparent);font-weight:600}
.wc-primary{background:#141414;color:#fff}
:root[data-theme=dark] .wc-primary{background:#ededed;color:#141414}
.wc-tabs{display:flex;gap:4px;padding:8px 16px 0}
.wc-tabs [data-wc-tab]{display:flex;align-items:baseline;gap:6px;padding:8px 14px;border:0;border-radius:10px 10px 0 0;background:none;color:var(--webapp-muted,#737373);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.wc-tabs [data-wc-tab] small{font-weight:400;font-size:12px}
.wc-tabs [data-wc-tab][aria-selected=true]{background:var(--webapp-code-bg,#fff);color:inherit}
.wc-tabs [data-wc-tab]:disabled{opacity:.4;cursor:default}
.wc-files{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 20px;background:var(--webapp-code-bg,#fff)}
.wc-files:not(:empty){padding:14px 20px 4px}
.wc-files p{margin:0 4px 0 0;font-size:12px;color:var(--webapp-muted,#737373)}
.wc-files button,.wc-ext{padding:5px 10px;border:0;border-radius:999px;background:color-mix(in srgb,currentColor 7%,transparent);color:inherit;font:inherit;font-size:12px;line-height:16px;cursor:pointer}
.wc-ext{cursor:default;color:var(--webapp-muted,#737373)}
.wc-files .wc-chip-more{background:none;color:var(--webapp-muted,#737373);text-decoration:underline;text-underline-offset:2px}
.wc-code{position:relative;height:72vh;overflow:auto;background:var(--webapp-code-bg,#fff);font:12.5px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;contain:strict}
.wc-space{position:relative;min-width:100%}
.wc-window{position:absolute;top:12px;left:0;right:0;will-change:transform;background:none;padding:0}
.wc-row{display:flex;height:20px;white-space:pre}
.wc-ln{position:sticky;left:0;flex:none;width:var(--wc-gutter,6ch);padding-right:12px;box-sizing:border-box;text-align:right;color:color-mix(in srgb,currentColor 35%,transparent);background:var(--webapp-code-bg,#fff);user-select:none}
.wc-tx{padding:0 20px 0 4px;tab-size:2}
.wc-status{position:absolute;inset:16px 20px auto;margin:0;color:var(--webapp-muted,#737373)}
.wc-status[hidden]{display:none}
.wc-foot{margin:0;padding:10px 20px 14px;font-size:12px;line-height:18px;color:var(--webapp-muted,#737373)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Colours for highlight.js (light / dark), kept to a few calm tones. */
.wc-window .hljs-tag,.wc-window .hljs-name,.wc-window .hljs-selector-tag{color:#22863a}
.wc-window .hljs-attr,.wc-window .hljs-attribute,.wc-window .hljs-property{color:#6f42c1}
.wc-window .hljs-string,.wc-window .hljs-regexp{color:#0a3069}
.wc-window .hljs-keyword,.wc-window .hljs-built_in,.wc-window .hljs-literal,.wc-window .hljs-selector-pseudo{color:#cf222e}
.wc-window .hljs-number,.wc-window .hljs-selector-class,.wc-window .hljs-selector-id{color:#0550ae}
.wc-window .hljs-comment,.wc-window .hljs-meta{color:#6e7781;font-style:italic}
.wc-window .hljs-title,.wc-window .hljs-function{color:#8250df}
:root[data-theme=dark]{--webapp-code-bg:#141414;--webapp-field:#262626}
:root[data-theme=dark] .wc-window .hljs-tag,:root[data-theme=dark] .wc-window .hljs-name,:root[data-theme=dark] .wc-window .hljs-selector-tag{color:#7ee787}
:root[data-theme=dark] .wc-window .hljs-attr,:root[data-theme=dark] .wc-window .hljs-attribute,:root[data-theme=dark] .wc-window .hljs-property{color:#d2a8ff}
:root[data-theme=dark] .wc-window .hljs-string,:root[data-theme=dark] .wc-window .hljs-regexp{color:#a5d6ff}
:root[data-theme=dark] .wc-window .hljs-keyword,:root[data-theme=dark] .wc-window .hljs-built_in,:root[data-theme=dark] .wc-window .hljs-literal,:root[data-theme=dark] .wc-window .hljs-selector-pseudo{color:#ff7b72}
:root[data-theme=dark] .wc-window .hljs-number,:root[data-theme=dark] .wc-window .hljs-selector-class,:root[data-theme=dark] .wc-window .hljs-selector-id{color:#79c0ff}
:root[data-theme=dark] .wc-window .hljs-comment,:root[data-theme=dark] .wc-window .hljs-meta{color:#8b949e}
:root[data-theme=dark] .wc-window .hljs-title,:root[data-theme=dark] .wc-window .hljs-function{color:#d2a8ff}
@media(max-width:900px){.wc{grid-template-columns:minmax(0,1fr)}.wc-side{position:static;max-height:300px}.wc-head{flex-direction:column}.wc-actions{justify-content:flex-start}}

/* The Code tab's live screen (webapp-code.js): 調べる outlines a part and opens its line, 操作する follows links to captured screens. */
.wc-stage{padding:0 16px 12px}
.wc-stage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px;font-size:12px;color:#737373;min-height:32px}
.wc-stage-note{flex:1 1 200px}
.wc-stage-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-stage-box{position:relative;height:min(56vh,560px);border-radius:12px;overflow:hidden;background:#eeeff0}
.wc-stage-box.is-scrolling{overflow:auto}
/* 拡大: the screen fills the window above the page; Esc or the button again brings it back. */
.wc-stage.is-wide{position:fixed;inset:12px;z-index:900;display:flex;flex-direction:column;padding:12px 16px 16px;border-radius:16px;background:var(--webapp-surface,#f5f5f5);box-shadow:0 10px 80px #0003}
.wc-stage.is-wide .wc-stage-box{flex:1;height:auto}
body.wc-stage-open{overflow:hidden}
.wc-stage-frame{position:absolute;top:0;left:0;display:block;border:0;transform-origin:top left}
.wc-stage-frame.is-loading{visibility:hidden}
.wc-row.is-hit{background:#7561e824}
/* Screen sheet: この画面のコード, the whole screen or its parts */
.webapp-sheet .cs-component-grid[hidden],.webapp-sheet .webapp-screen-code[hidden]{display:none}
.webapp-code-switch{display:inline-flex;gap:4px;margin:12px 0 16px;padding:4px;border-radius:999px;background:var(--webapp-surface,#f5f5f5)}
.webapp-code-switch button{padding:8px 16px;border:0;border-radius:999px;background:none;color:var(--webapp-muted,#737373);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.webapp-code-switch{position:relative;isolation:isolate}
.webapp-code-switch button{position:relative;z-index:1;transition:color .15s cubic-bezier(.4,0,.2,1)}
.webapp-code-switch button[aria-selected=true]{background:var(--webapp-code-bg,#fff);color:inherit;box-shadow:0 1px 3px rgb(0 0 0/.08)}
/* Once measured, one pill slides between the tabs instead of each tab painting its own. */
.webapp-code-switch.has-ink::before{content:"";position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--ink-w);translate:var(--ink-x) 0;border-radius:999px;background:var(--webapp-code-bg,#fff);box-shadow:0 1px 3px rgb(0 0 0/.08);transition:translate .32s cubic-bezier(.32,.72,0,1),width .32s cubic-bezier(.32,.72,0,1);pointer-events:none}
.webapp-code-switch.has-ink button[aria-selected=true]{background:none;box-shadow:none}
.webapp-sheet :is(.webapp-screen-code,.cs-component-grid,.webapp-search).is-entering{animation:webapp-pane-in .24s cubic-bezier(.32,.72,0,1) both}
@keyframes webapp-pane-in{from{opacity:0;translate:0 8px}}
@media (prefers-reduced-motion:reduce){.webapp-code-switch.has-ink::before{transition:none}.webapp-sheet .is-entering{animation:none}}
.webapp-code-switch button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.webapp-screen-code .wc-screen-code{display:block;width:100%;border-radius:16px;overflow:hidden;background:var(--webapp-code-bg,#fff)}
.webapp-screen-code .wc-code{height:min(72vh,720px)}
/* Which capture the preview shows at the chosen width (the original app re-taken at 768 / 500px, or CSS only). */
.wc-width-note,.webapp-width-note{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--webapp-soft,rgba(115,115,115,.12));color:inherit;font-size:13px;line-height:1.5}
.wc-width-note[hidden],.webapp-width-note[hidden]{display:none}

/* App code workspace: screen and source stay visible together. */
/* Full width only while the code workbench is open; the locked gate keeps the page's centred column like 画面 / フロー (2026-10-03). */
body.no-sidebar main#content:has(.webapp-detail[data-webapp-view="code"] .wc-workbench:not([hidden])){max-width:none!important;padding-inline:24px!important}
.webapp-detail[data-webapp-view="code"]:has(.wc-workbench:not([hidden])){max-width:none}
.wc-workbench{grid-template-columns:200px minmax(0,1fr);gap:12px;--wc-workspace-height:clamp(480px,74vh,900px)}
.wc-workbench .wc-side{max-height:calc(var(--wc-workspace-height) + 64px);border-radius:12px}
.wc-workbench .wc-search{padding:8px}
.wc-workbench .wc-search input{font-size:12px}
.wc-workbench .wc-main{background:none;overflow:visible}
.wc-workbench .wc-head{padding:0 0 12px;min-height:52px;align-items:center}
.wc-workbench .wc-title{font-size:16px;line-height:22px}
.wc-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.wc-workspace:has(>.wc-stage[hidden]){grid-template-columns:minmax(0,1fr)}
.wc-workspace>.wc-stage{display:flex;flex-direction:column;padding:0;height:var(--wc-workspace-height);min-width:0}
.wc-workspace>.wc-stage[hidden]{display:none}
.wc-workspace .wc-stage-bar{flex:none;gap:6px;margin:0 0 8px}
.wc-workspace .wc-stage-note{flex-basis:100%;font-size:11px;line-height:18px}
.wc-workspace .wc-stage-box{flex:1;min-height:0;height:auto;background:var(--webapp-surface,#f5f5f5);border-radius:10px}
.wc-preview-loading{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-size:12px;color:var(--webapp-muted,#737373)}
.wc-preview-loading[hidden]{display:none}
.wc-workspace>.wc-stage.is-wide{position:fixed;inset:12px;height:auto;padding:12px 16px 16px;background:var(--webapp-surface,#f5f5f5);z-index:900}
.wc-editor{display:flex;flex-direction:column;min-width:0;height:var(--wc-workspace-height);border-radius:12px;overflow:hidden;background:#1e1e1e;color:#d4d4d4;--webapp-code-bg:#1e1e1e;--webapp-muted:#a9a9a9}
.wc-editor .wc-tabs{flex:none;gap:0;padding:0;background:#252526;overflow-x:auto}
.wc-editor .wc-tabs [data-wc-tab]{align-items:center;gap:7px;padding:0 13px;min-height:38px;border-radius:0;border-top:1px solid transparent;background:#2d2d2d;color:#969696;font-size:12px;font-weight:400;white-space:nowrap}
.wc-editor .wc-tabs [data-wc-tab][aria-selected=true]{background:#1e1e1e;border-top-color:#007acc;color:#fff}
.wc-editor .wc-tabs [data-wc-tab] small{font-size:10px;color:#969696}
.wc-language-icon{font-style:normal;font-size:12px}
.wc-language-html{color:#e37933}.wc-language-css{color:#519aba}.wc-language-js{color:#cbcb41}
.wc-crumbs{flex:none;padding:5px 14px;font-size:12px;line-height:18px;color:#a9a9a9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-editor .wc-files{flex:none;max-height:110px;overflow:auto;padding-inline:12px;background:#1e1e1e}
.wc-editor .wc-files:not(:empty){padding-block:8px}
.wc-editor .wc-code{flex:1;height:auto;min-height:0;font-size:12px;color:#d4d4d4;background:#1e1e1e}
.wc-editor .wc-ln{color:#858585;background:#1e1e1e}
.wc-editor .wc-foot{flex:none;background:#007acc;color:#fff;font-size:11px;line-height:18px;padding:3px 12px;text-align:right}
.wc-editor .wc-status:has(.tb-inline-loader){inset:0;display:grid;place-items:center}
.wc-editor .wc-status[hidden]{display:none}
.wc-workbench .wc-editor .wc-window .hljs-tag,.wc-workbench .wc-editor .wc-window .hljs-name,.wc-workbench .wc-editor .wc-window .hljs-selector-tag{color:#569cd6}
.wc-workbench .wc-editor .wc-window .hljs-attr,.wc-workbench .wc-editor .wc-window .hljs-attribute,.wc-workbench .wc-editor .wc-window .hljs-property{color:#9cdcfe}
.wc-workbench .wc-editor .wc-window .hljs-string,.wc-workbench .wc-editor .wc-window .hljs-regexp{color:#ce9178}
.wc-workbench .wc-editor .wc-window .hljs-keyword,.wc-workbench .wc-editor .wc-window .hljs-built_in,.wc-workbench .wc-editor .wc-window .hljs-literal,.wc-workbench .wc-editor .wc-window .hljs-selector-pseudo{color:#569cd6}
.wc-workbench .wc-editor .wc-window .hljs-number,.wc-workbench .wc-editor .wc-window .hljs-selector-class,.wc-workbench .wc-editor .wc-window .hljs-selector-id{color:#b5cea8}
.wc-workbench .wc-editor .wc-window .hljs-comment,.wc-workbench .wc-editor .wc-window .hljs-meta{color:#6a9955;font-style:normal}
.wc-workbench .wc-editor .wc-window .hljs-title,.wc-workbench .wc-editor .wc-window .hljs-function{color:#dcdcaa}
@media(max-width:1200px){.wc-workbench{grid-template-columns:170px minmax(0,1fr)}.wc-workspace{grid-template-columns:minmax(0,1fr)}.wc-workspace>.wc-stage{height:clamp(360px,60vh,620px)}}
@media(max-width:900px){body.no-sidebar main#content:has(.webapp-detail[data-webapp-view="code"]){padding-inline:16px!important}.wc-workbench{grid-template-columns:minmax(0,1fr)}.wc-workbench .wc-side{max-height:180px}.wc-workbench .wc-head{flex-direction:row}.wc-workbench .wc-actions{flex-wrap:nowrap}.wc-workbench .wc-btn{padding:7px 10px;font-size:12px}.wc-editor .wc-tabs [data-wc-tab]{padding-inline:10px}}

.wc-stage-bar [hidden]{display:none!important}
.wc-workbench .wc-side{background:#1e1e1e;color:#a9a9a9;--webapp-field:#252526;--webapp-muted:#969696}
.wc-workbench .wc-list [data-wc-item][aria-current=true]{background:#094771;color:#fff}
.wc-editor-bar{display:flex;align-items:stretch;flex:none;min-width:0;background:#252526}
.wc-editor-bar .wc-tabs{flex:1;min-width:0}
.wc-editor-actions{display:flex;align-items:center;gap:2px;padding:0 6px}
.wc-editor-actions .cs-icon-action{width:28px;height:28px;color:#bdbdbd;background:transparent;--cs-icon-surface:#252526}
.wc-editor-actions .cs-icon-action:hover{background:#ffffff14;color:#fff}
.wc-editor-actions .cs-icon-action:disabled{opacity:.4;cursor:default}
.wc-editor-actions .cs-icon-action svg{width:17px;height:17px}

/* Keep the app code access prompt compact inside the wide code workspace. */
.webapp-detail[data-webapp-view="code"] .site-code-gate:not(.is-overlay){width:100%;max-width:640px;box-sizing:border-box;margin-inline:auto!important}
.webapp-detail[data-webapp-view="code"] .site-code-gate:not(.is-overlay) .site-code-gate-primary{width:auto;justify-self:start}

/* Code access is an aligned content section, rather than a floating panel. */
.webapp-detail[data-webapp-view="code"] .site-code-gate.wc-access{max-width:680px;margin:0!important;padding:40px 0 48px;background:transparent;border-radius:0;gap:14px;box-shadow:none}
.webapp-detail .wc-access .site-code-gate-title{font-size:24px;letter-spacing:-.025em;line-height:1.4}
.webapp-detail .wc-access .webapp-note{margin:0;max-width:60ch;font-size:14px;line-height:1.8;color:var(--wm-t2)}
.webapp-detail .wc-access .site-code-gate-note{font-size:13px;line-height:1.7;opacity:1;color:var(--wm-t2)}
.webapp-detail .wc-access .site-code-gate-link{margin-top:4px}
@media(max-width:719px){.webapp-detail[data-webapp-view="code"] .site-code-gate.wc-access{padding-top:28px}.webapp-detail .wc-access .site-code-gate-title{font-size:21px}}
/* Web-app list cards (2026-10-03, Kotaro): the screen is the subject, so it fills the panel with a thin even margin
   instead of floating in a tall grey field. Same columns, gaps, radius and caption; only the panel's height and the
   screenshot's share of it change (website cards keep website-pro.css's proportions). */
body #content .gallery-grid.webapp-results .site-card .thumbnail{aspect-ratio:1.5/1}
body #content .gallery-grid.webapp-results .site-card .thumbnail>img{width:94%;max-width:94%;height:auto}
/* The web-app code gate reads as a left-aligned section: its lines, meter and button share one left edge (they were
   centred lines inside a left-set block, 2026-10-03). */
.webapp-detail[data-webapp-view="code"] .site-code-gate.wc-access{align-items:flex-start;text-align:left}
.webapp-detail .wc-access .site-code-gate-actions{align-items:flex-start;width:auto}
.webapp-detail .wc-access .site-code-gate-primary{width:auto;min-width:200px}
.webapp-detail .wc-access :is(.site-code-gate-note,.site-code-gate-status){margin:0;text-align:left}
.webapp-detail .wc-access .site-code-gate-quota{margin:10px 0 6px}
/* After an unlock the workbench arrives with a short fade and rise, once the gate has stepped aside. */
@keyframes wc-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wc-workbench:not([hidden]){animation:wc-arrive 360ms cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){.wc-workbench:not([hidden]){animation:none}}

/* Keep instructions readable beside narrow code previews. */
.wc-workspace .wc-stage-note{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.5}
.wc-workspace .wc-stage-bar{align-content:flex-start}
.cs-devices button:disabled{opacity:.35;cursor:not-allowed}
.webapp-sheet .cs-help{overflow-wrap:anywhere;line-height:1.6}

.wc-recorded-screen{display:block;width:100%;height:100%;object-fit:contain;object-position:top;background:#111}
.webapp-recorded-screen{display:block;width:100%;height:100%;object-fit:contain;object-position:top}
.webapp-sheet .cs-live-frame[hidden]{display:none}

.wc-row.has-visual-target:hover{background:#007acc22}

.wc-editor .wc-status .wc-btn{margin-top:12px;color:inherit;background:#ffffff16}

/* Keep pending feedback inside the preview, without moving the toolbar or screen. */
.webapp-screen-loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:24px;color:var(--wm-t2,#737373);pointer-events:none}
.webapp-screen-loading[hidden]{display:none}

/* Keep fixed-ratio card geometry while skipping offscreen screenshot painting. */
body #content .gallery-grid.webapp-results .thumbnail{content-visibility:auto}