/* Web app detail, screen viewer and flow viewer laid out and timed like Mobbin's app pages (measured 2026-10-02,
   docs/plans/2026-10-02-webapp-mobbin-parity.ja.md). Colours are Mobbin's light/dark tokens. */
.webapp-detail,.wv-dialog{
  --wm-bg:#fff;--wm-bg2:hsl(0 0% 25%/6%);--wm-bg3:hsl(0 0% 25%/8%);--wm-bg3h:hsl(0 0% 25%/12%);--wm-inv:hsl(0 0% 8%);--wm-invh:hsl(0 0% 15%);
  --wm-modal:#fff;--wm-overlay:rgba(0,0,0,.6);--wm-cell:rgba(0,0,0,.1);--wm-t1:hsl(0 0% 8%);--wm-t2:hsl(0 0% 44%);--wm-t3:hsl(0 0% 53%);--wm-tinv:#fff;
  --wm-line:hsl(0 0% 25%/8%);--wm-brand:hsl(216 100% 50%);--wm-glass:hsl(0 0% 46%/48%);--wm-glassh:hsl(0 0% 46%/56%);--wm-badge:hsl(0 0% 45%/56%);--wm-menu:hsl(0 0% 15%/88%);
  --wm-ease:cubic-bezier(0,0,.2,1);--wm-font:MobbinStudy,var(--tobira-font,system-ui),sans-serif;
}
:root[data-theme=dark] :is(.webapp-detail,.wv-dialog){--wm-bg:hsl(0 0% 8%);--wm-bg2:hsl(0 0% 100%/6%);--wm-bg3:hsl(0 0% 100%/8%);--wm-bg3h:hsl(0 0% 100%/12%);--wm-inv:#fff;--wm-invh:hsl(0 0% 93%);--wm-modal:hsl(0 0% 12%);--wm-overlay:rgba(0,0,0,.8);--wm-t1:#fff;--wm-t2:hsl(0 0% 68%);--wm-tinv:hsl(0 0% 8%);--wm-line:hsl(0 0% 100%/8%)}

/* Header */
.webapp-detail{font-family:var(--wm-font);color:var(--wm-t1)}
.webapp-detail .wm-head{padding:24px 0 0}
.wm-icon{display:grid;place-items:center;width:96px;height:96px;border-radius:20px;overflow:hidden;background:var(--wm-bg2);box-shadow:inset 0 0 0 1px var(--wm-line);font:600 40px/1 var(--wm-font);color:var(--wm-t1)}
.wm-icon img{width:100%;height:100%;object-fit:cover}
/* A real logo stands on its own: no tile, no outline. */
.wm-icon.has-img{background:none;box-shadow:none;border-radius:0;overflow:visible}
.wm-icon.has-img img{object-fit:contain}
.wm-title{margin:24px 0 0;font:652 44px/48px var(--wm-font);letter-spacing:-.4px;color:var(--wm-t1)}
.wm-title span{display:inline-block;max-width:35ch;text-wrap:balance}
.wm-tagline{max-width:40ch;margin:8px 0 0;font:560 20px/28px var(--wm-font);letter-spacing:-.1px;color:var(--wm-t2);text-wrap:balance}
.wm-about{max-width:62ch;margin:16px 0 0;font:456 16px/28px var(--wm-font);color:var(--wm-t2)}
.wm-meta{display:flex;flex-wrap:wrap;gap:16px 32px;margin:24px 0 0}
.wm-meta dt{font:456 14px/20px var(--wm-font);color:var(--wm-t2)}
.wm-meta dd{margin:2px 0 0;font:600 16px/22px var(--wm-font);letter-spacing:.2px}
.wm-actions{display:flex;align-items:center;gap:8px;margin:24px 0 0;position:relative}
.wm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 16px;border:0;border-radius:9999px;background:var(--wm-bg3);color:var(--wm-t1);font:600 16px/22px var(--wm-font);letter-spacing:.2px;cursor:pointer;text-decoration:none;transition:color .15s var(--wm-ease),background-color .15s var(--wm-ease)}
.wm-btn:hover{background:var(--wm-bg3h)}
.wm-btn.is-inv{background:var(--wm-inv);color:var(--wm-tinv)}
.wm-btn.is-inv:hover{background:var(--wm-invh)}
.wm-btn.is-line{background:transparent;box-shadow:inset 0 0 0 1px var(--wm-line)}
.wm-btn.is-round{width:44px;padding:0}
.wm-btn.is-glass{background:var(--wm-glass);color:#fff;backdrop-filter:blur(20px)}
.wm-btn.is-glass:hover{background:var(--wm-glassh)}
.wm-btn.is-sm{height:36px;padding:0 8px;font-size:14px;line-height:20px}
.wm-btn.is-sm.is-round{width:36px}
.wm-btn svg{width:20px;height:20px}
.wm-btn[aria-pressed=true]:not(.is-inv){background:var(--wm-inv);color:var(--wm-tinv)}
.wm-btn:focus-visible,.wm-tab:focus-visible,.wm-card:focus-visible,.wm-side a:focus-visible{outline:none;box-shadow:0 0 0 4px hsl(212 100% 50%/50%)}

/* Popovers: Mobbin's glass menu, opacity + scale .96 over 150ms ease-out */
.wm-pop{position:absolute;z-index:40;min-width:240px;padding:8px;border-radius:20px;background:var(--wm-menu);color:#fff;backdrop-filter:blur(24px);box-shadow:0 8px 24px rgba(0,0,0,.24);transform-origin:top left;animation:wm-in .15s ease-out}
.wm-pop[hidden]{display:none}
.wm-pop.is-closing{animation:wm-out .15s ease-out forwards}
.wm-pop button,.wm-pop a{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:0;border-radius:12px;background:none;color:inherit;font:600 14px/20px var(--wm-font);text-align:left;text-decoration:none;cursor:pointer}
.wm-pop :is(button,a):hover{background:hsl(0 0% 93%/8%)}
.wm-pop dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:4px 8px 8px}
.wm-pop dt{font:600 12px/16px var(--wm-font);color:hsl(0 0% 68%)}
.wm-pop dd{margin:2px 0 0;font:600 14px/20px var(--wm-font)}
@keyframes wm-in{from{opacity:0;scale:.96}}
@keyframes wm-out{to{opacity:0;scale:.96}}

/* Sticky tab bar */
.wm-bar{position:sticky;top:var(--wm-top,0px);transition:top .2s linear;z-index:15;isolation:isolate;display:flex;align-items:center;gap:24px;margin:48px 0 0;padding:14px 0;background:transparent}
/* Stuck: a full-width backing in the page's own colour fades in (Mobbin's header fade, 200ms). */
.wm-bar::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--wm-page,var(--wm-bg));box-shadow:0 0 0 100vmax var(--wm-page,var(--wm-bg)),0 1px 0 100vmax var(--wm-line);clip-path:inset(0 -100vmax -1px);opacity:0;transition:opacity .2s linear}
/* (A spread shadow, clipped to the bar's height, reaches the window edges without widening the page.) */
.wm-bar.is-stuck::before{opacity:1}
.wm-bar .wm-bar-icon{flex:none;width:0;height:36px;margin-right:-24px;border-radius:8px;font-size:16px;overflow:hidden;opacity:0;scale:.6;transition:width .24s cubic-bezier(.32,.72,0,1),margin .24s cubic-bezier(.32,.72,0,1),opacity .18s linear,scale .24s cubic-bezier(.32,.72,0,1)}
.wm-bar .wm-bar-icon img{width:36px;max-width:none}
.wm-bar.is-stuck .wm-bar-icon{width:36px;margin-right:0;opacity:1;scale:1}
.wm-version{position:relative}
.wm-version>button{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:var(--wm-t1);font:600 16px/22px var(--wm-font);cursor:pointer}
.wm-tabs{position:relative;display:flex;gap:24px;padding-left:24px;border-left:1px solid var(--wm-line)}
/* The selected tab's underline slides to the new tab. */
.wm-tab-ink{position:absolute;bottom:0;left:0;height:2px;border-radius:2px;background:var(--wm-t1);transition:translate .32s cubic-bezier(.32,.72,0,1),width .32s cubic-bezier(.32,.72,0,1);pointer-events:none}
.wm-tabs.has-ink .wm-tab[aria-current=page]{border-color:transparent}
.wm-tab{padding:4px 0;border-bottom:2px solid transparent;color:var(--wm-t3);font:600 16px/22px var(--wm-font);letter-spacing:.2px;text-decoration:none;white-space:nowrap;transition:color .15s var(--wm-ease),border-color .15s var(--wm-ease)}
.wm-tab:hover{color:var(--wm-t1)}
.wm-tab[aria-current=page]{color:var(--wm-t1);border-color:var(--wm-t1)}
.wm-count{margin-left:auto;text-align:right;font:456 14px/18px var(--wm-font);color:var(--wm-t2)}
.wm-count b{display:block;font-weight:456}

/* Screens grid + card hover choreography */
.wm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--wm-col,384px)),1fr));gap:24px;margin:24px 0 48px}
@media(min-width:1024px){.wm-grid{--wm-col:512px}}
.wm-cell,.wm-frame{position:relative}
.wm-card{position:relative;display:block;aspect-ratio:1.6016/1;overflow:hidden;border-radius:8px;background:var(--wm-bg2);cursor:zoom-in;outline:0 solid transparent;outline-offset:3px;transition:outline .15s var(--wm-ease)}
.wm-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--wm-line);pointer-events:none}
.wm-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}
.wm-card img.is-loaded{opacity:1}
.wm-card .wm-shade{position:absolute;inset:0;z-index:1;background:var(--wm-cell);opacity:0;transition:opacity .15s var(--wm-ease)}
.wm-badge{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;padding:4px 8px;border-radius:8px;background:var(--wm-badge);color:#fff;font:600 12px/16px var(--wm-font);letter-spacing:.2px;backdrop-filter:blur(20px);transition:opacity .15s var(--wm-ease)}
.wm-more{position:absolute;top:16px;right:16px;z-index:3;opacity:0;transition:opacity .15s var(--wm-ease)}
.wm-hover-actions{position:absolute;right:16px;bottom:16px;left:16px;z-index:3;display:flex;gap:8px;opacity:0;translate:0 16px;transition:translate .3s var(--wm-ease),opacity .3s var(--wm-ease);pointer-events:none}
.wm-hover-actions .wm-btn{flex:1}
.wm-cell:is(:hover,:focus-within) .wm-shade,.wm-cell:is(:hover,:focus-within) .wm-more{opacity:1}
.wm-cell:is(:hover,:focus-within) .wm-badge{opacity:0}
.wm-cell:is(:hover,:focus-within) .wm-hover-actions{opacity:1;translate:0 0;pointer-events:auto}
.wm-cell-label{display:block;margin:12px 0 0;font:600 14px/20px var(--wm-font);color:var(--wm-t1)}
.wm-cell-label small{display:block;font:456 14px/20px var(--wm-font);color:var(--wm-t2)}
.wm-skeleton{animation:wm-pulse 1.5s ease-in-out infinite}
@keyframes wm-pulse{50%{opacity:.5}}
.wm-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:9999px;background:var(--wm-bg3);font:456 14px/20px var(--wm-font);color:var(--wm-t2)}
.wm-search input{flex:1;min-width:0;border:0;background:none;color:var(--wm-t1);font:inherit;outline:none}

/* Flows tab */
.wm-flows{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;margin:24px 0 48px}
.wm-side{position:sticky;top:calc(var(--wm-top,0px) + 80px);align-self:start;max-height:calc(100vh - var(--wm-top,0px) - 96px);transition:top .2s linear;overflow:auto;padding-top:4px}
.wm-side ul{list-style:none;margin:24px 0 0;padding:0}
.wm-side a{display:block;padding:7px 0;color:var(--wm-t2);font:600 16px/24px var(--wm-font);text-decoration:none;transition:color .15s var(--wm-ease)}
.wm-side a:hover,.wm-side a[aria-current=true]{color:var(--wm-t1)}
.wm-flow{scroll-margin-top:calc(var(--wm-top,0px) + 96px);margin:0 0 56px}
.wm-strip-wrap{position:relative}
.wm-strip{display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory}
.wm-strip::-webkit-scrollbar{display:none}
.wm-strip .wm-card{flex:0 0 480px;scroll-snap-align:start}
.wm-strip-arrow{position:absolute;top:50%;z-index:4;translate:0 -50%;transition:opacity .15s var(--wm-ease),background-color .15s var(--wm-ease)}
.wm-strip-arrow[data-dir="-1"]{left:16px}.wm-strip-arrow[data-dir="1"]{right:16px}
.wm-strip-arrow[hidden]{display:inline-flex;opacity:0;pointer-events:none}
.wm-flow-name{display:flex;align-items:center;gap:8px;margin:0;font:400 16px/24px var(--wm-font);color:var(--wm-t1)}
.wm-flow-count{font:456 14px/20px var(--wm-font);color:var(--wm-t2)}
@media(max-width:839px){.wm-flows{grid-template-columns:1fr}.wm-side{display:none}.wm-strip .wm-card{flex-basis:300px}.wm-title{font-size:32px;line-height:36px}.wm-grid{grid-template-columns:minmax(0,1fr)}.wm-bar{gap:12px;overflow-x:auto}.wm-bar>*,.wm-tab{flex:none;white-space:nowrap}.wm-count{display:none}}

/* Viewer (screen and flow): overlay fade 150ms ease-out, panel opacity + scale .96 */
.wv-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--wm-t1);font-family:var(--wm-font);overflow:hidden}
.wv-dialog::backdrop{background:transparent}
.wv-overlay{position:fixed;inset:0;background:var(--wm-overlay);animation:wv-fade .15s ease-out}
.wv-panel{position:fixed;inset:var(--wv-inset,32px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:72px minmax(0,1fr) auto;border-radius:24px;background:var(--wm-modal);overflow:hidden;animation:wv-in .15s ease-out}
.wv-dialog.is-closing .wv-overlay{animation:wv-fade-out .15s ease-out forwards}
.wv-dialog.is-closing .wv-panel{animation:wv-out .15s ease-out forwards}
@keyframes wv-fade{from{opacity:0}}
@keyframes wv-fade-out{to{opacity:0}}
@keyframes wv-in{from{opacity:0;scale:.96}}
@keyframes wv-out{to{opacity:0;scale:.96}}
.wv-head{display:flex;align-items:center;gap:12px;padding:0 24px}
.wv-app{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--wm-t1);font:600 20px/26px var(--wm-font);text-decoration:none}
.wv-app:hover{text-decoration:underline}
.wv-app .wm-icon{width:28px;height:28px;border-radius:7px;font-size:14px}
.wv-in{color:var(--wm-t2);font:600 20px/26px var(--wm-font)}
.wv-head-mid{flex:1;display:flex;justify-content:center}
.wv-seg{display:inline-flex;padding:2px;border-radius:9999px;background:var(--wm-bg3)}
.wv-seg span{padding:4px 12px;border-radius:9999px;background:var(--wm-modal);font:600 12px/16px var(--wm-font);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wv-head-end{display:flex;align-items:center;gap:4px}
.wv-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;padding:8px 108px 0}
.wv-shot{position:relative;height:100%;max-width:100%;aspect-ratio:var(--wv-ratio,1.6);border-radius:8px;overflow:hidden;background:var(--wm-bg2);cursor:zoom-in}
.wv-shot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--wm-line);pointer-events:none}
.wv-shot img{display:block;width:100%;height:100%;object-fit:contain;object-position:top;opacity:0;transition:opacity .15s cubic-bezier(.4,0,.2,1)}
.wv-shot img.is-loaded{opacity:1}
.wv-shot.is-zoomed{cursor:zoom-out;overflow:auto;aspect-ratio:auto;width:100%}
.wv-shot.is-zoomed img{width:auto;max-width:none;height:auto}
.wv-nav{position:absolute;top:50%;translate:0 -50%;z-index:2}
.wv-nav[data-dir="-1"]{left:32px}.wv-nav[data-dir="1"]{right:32px}
.wv-nav[hidden]{display:none}
.wv-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:20px 24px 24px}
.wv-foot>*{animation:wv-fade .3s ease-out backwards}
.wv-dialog.is-settled .wv-foot>*{animation:none}
.wv-found{display:flex;align-items:center;gap:8px;min-width:0;font:456 14px/20px var(--wm-font);color:var(--wm-t2);animation-delay:.2s}
.wv-chip{display:inline-flex;max-width:160px;padding:4px 8px;border-radius:8px;background:var(--wm-bg3);color:var(--wm-t1);font:600 14px/20px var(--wm-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.wv-chip:hover{background:var(--wm-bg3h)}
.wv-actions{display:flex;gap:8px;animation-delay:.4s}
.wv-meta{justify-self:end;text-align:right;font:456 14px/20px var(--wm-font);color:var(--wm-t2);animation-delay:.5s;position:relative}
.wv-meta button{display:block;margin-left:auto;padding:0;border:0;background:none;color:var(--wm-t1);font:600 14px/20px var(--wm-font);cursor:pointer}
.wv-meta button:hover{text-decoration:underline}
.wv-meta .wm-pop{right:0;bottom:calc(100% + 8px);width:320px;transform-origin:bottom right;text-align:left}
.wv-strip{display:flex;align-items:center;gap:24px;height:100%;padding:0 9%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.wv-strip::-webkit-scrollbar{display:none}
.wv-strip .wv-shot{flex:0 0 auto;width:min(31vw,440px);height:auto;aspect-ratio:1.6;padding:0;border:0;scroll-snap-align:center;scroll-snap-stop:always;cursor:pointer;transition:outline-color .15s var(--wm-ease);outline:3px solid transparent;outline-offset:3px}
.wv-strip .wv-shot.is-current{outline-color:var(--wm-brand)}
.wv-step{position:absolute;left:12px;bottom:12px;z-index:2;padding:4px 8px;border-radius:8px;background:var(--wm-badge);color:#fff;font:600 12px/16px var(--wm-font);backdrop-filter:blur(20px)}
@media(min-width:1536px){.wv-panel{--wv-inset:40px}}
@media(min-width:1920px){.wv-panel{--wv-inset:64px}}
@media(max-width:719px){.wv-panel{inset:28px 0 0;border-radius:16px 16px 0 0;grid-template-rows:56px minmax(0,1fr) auto;animation-duration:.5s;animation-timing-function:cubic-bezier(.32,.72,0,1)}.wv-overlay{animation-duration:.5s}.wv-stage{padding:8px 16px 0}.wv-nav{display:none}.wv-foot{grid-template-columns:1fr;justify-items:center}.wv-found,.wv-meta{display:none}}
@media(prefers-reduced-motion:reduce){.wv-overlay,.wv-panel,.wm-pop,.wv-foot>*{animation:none}.wm-hover-actions{transition:none}}

/* Switching tabs: the old content fades down and out, the new one rises in. */
[data-webapp-body]{transition:opacity .14s ease-in,translate .14s ease-in}
[data-webapp-body].is-leaving{opacity:0;translate:0 6px}
[data-webapp-body].is-entering{animation:wm-rise .28s cubic-bezier(0,0,.2,1)}
.wm-count{transition:opacity .14s ease-in}
.wm-count.is-leaving{opacity:0}
@keyframes wm-rise{from{opacity:0;translate:0 10px}}
/* Screen viewer: the next image fades in over the previous one (no blank between screens). */
.wv-shot img.wv-prev{position:absolute;inset:0;opacity:1;transition:none}
/* Desktop ⇄ phone: the page dips out, its shell eases to the new width, and the page returns once sized. */
.wm-shell{position:absolute;top:0;bottom:0;z-index:0;border-radius:12px;background:var(--wm-bg2,rgba(0,0,0,.05));pointer-events:none;transition:left .42s cubic-bezier(.32,.72,0,1),width .42s cubic-bezier(.32,.72,0,1)}
.is-morphing :is(.wc-stage-frame,.cs-live-frame){animation:wm-dip .52s cubic-bezier(.4,0,.2,1)}
.is-morphing .cs-frame-box{transition:width .42s cubic-bezier(.32,.72,0,1),height .42s cubic-bezier(.32,.72,0,1)}
@keyframes wm-dip{0%{opacity:1}22%{opacity:0;scale:.985}72%{opacity:0;scale:.985}100%{opacity:1;scale:1}}
.wc-stage-frame,.cs-live-frame{z-index:1}
@media(prefers-reduced-motion:reduce){[data-webapp-body],.wm-tab-ink,.wm-shell{transition:none}.is-morphing :is(.wc-stage-frame,.cs-live-frame),[data-webapp-body].is-entering{animation:none}}

/* Highlights (Mobbin: badged best screens first; the last cell lists the flows; then a ruled 'All screens'). */
.wm-flows-card{position:relative;display:flex;flex-direction:column;aspect-ratio:1.6016/1;overflow:hidden;border-radius:8px;background:linear-gradient(var(--wm-bg2),transparent 70%)}
.wm-flows-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--wm-line);pointer-events:none}
.wm-fc-strip{display:flex;gap:12px;height:44%;padding:32px 0 0 0;overflow:hidden}
.wm-fc-strip img{height:100%;width:auto;aspect-ratio:1.6;flex:none;border-radius:6px;box-shadow:0 0 0 1px var(--wm-line);object-fit:cover;object-position:top;animation:wm-rise .28s cubic-bezier(0,0,.2,1) backwards}
.wm-fc-strip img:nth-child(2){animation-delay:.03s}.wm-fc-strip img:nth-child(3){animation-delay:.06s}.wm-fc-strip img:nth-child(4){animation-delay:.09s}
.wm-fc-list{list-style:none;margin:auto 0 0;padding:0 40px}
.wm-fc-list a{display:block;overflow:hidden;color:var(--wm-t3);font:600 20px/28px var(--wm-font);text-decoration:none;white-space:nowrap;text-overflow:ellipsis;transition:color .15s var(--wm-ease)}
.wm-fc-list a:is(:hover,:focus-visible,[aria-current=true]){color:var(--wm-t1)}
.wm-fc-all{display:inline-block;margin:16px 40px 40px;color:var(--wm-t1);font:600 14px/20px var(--wm-font);text-decoration:none}
.wm-fc-all:hover{text-decoration:underline}
.wm-divider{display:flex;align-items:center;gap:24px;margin:56px 0 8px;color:var(--wm-t2);font:456 14px/20px var(--wm-font)}
.wm-divider::before,.wm-divider::after{content:"";flex:1;height:1px;background:var(--wm-line)}
@media(max-width:839px){.wm-fc-list{padding:0 20px}.wm-fc-all{margin:12px 20px 20px}.wm-fc-list a{font-size:16px;line-height:24px}}

/* 調べる (inspector sheet) in the same theme: no grey stage or bezel; the screen fills the stage edge to edge. */
.webapp-sheet{--wm-modal:#fff;--wm-t1:hsl(0 0% 8%);--wm-t2:hsl(0 0% 44%);--wm-bg2:hsl(0 0% 25%/6%);--wm-bg3:hsl(0 0% 25%/8%);--wm-line:hsl(0 0% 25%/8%);background:var(--wm-modal)!important;color:var(--wm-t1)!important;font-family:MobbinStudy,var(--tobira-font,system-ui),sans-serif}
:root[data-theme=dark] .webapp-sheet{--wm-modal:hsl(0 0% 12%);--wm-t1:#fff;--wm-t2:hsl(0 0% 68%);--wm-bg2:hsl(0 0% 100%/6%);--wm-bg3:hsl(0 0% 100%/8%);--wm-line:hsl(0 0% 100%/8%)}
.webapp-sheet .cs-sheet-head{background:color-mix(in srgb,var(--wm-modal) 85%,transparent)!important;color:var(--wm-t1)}
.webapp-sheet .cs-sheet-head>a{color:var(--wm-t1)}
.webapp-sheet .cs-sheet-head>div,.webapp-sheet .cs-help,.webapp-sheet .webapp-note{color:var(--wm-t2)!important}
.webapp-sheet .cs-sheet-head>button{background:var(--wm-bg3)!important;color:var(--wm-t1)!important}
.webapp-sheet .cs-sheet-body{max-width:none;padding:8px 24px 24px}
.webapp-sheet .cs-stage.webapp-stage{max-height:none;background:transparent;border-radius:12px;overflow:hidden;justify-content:center}
.webapp-sheet .cs-frame-box{margin:0 auto;border-radius:12px;box-shadow:0 0 0 1px var(--wm-line)}
.webapp-sheet .cs-live-frame{background:#fff}
.webapp-sheet .webapp-pagination a{color:var(--wm-t1)}
.webapp-sheet .cs-component-area{color:var(--wm-t1)}
.webapp-sheet .cs-component-grid>button{background:var(--wm-bg3);color:var(--wm-t1)}

/* Component code popup: one screen, two balanced columns (preview | code), nothing empty below, themed. */
.webapp-component-popup{--wm-modal:#fff;--wm-t1:hsl(0 0% 8%);--wm-t2:hsl(0 0% 44%);--wm-bg2:hsl(0 0% 25%/6%);--wm-bg3:hsl(0 0% 25%/8%);--wm-line:hsl(0 0% 25%/8%);
  --g-bg:var(--wm-bg2);--g-fg:var(--wm-t1);--g-muted:var(--wm-t2);--g-chip:var(--wm-bg3);--g-btn:var(--wm-t1);--g-btn-fg:var(--wm-modal);--g-lock:var(--wm-t1);--g-lock-fg:var(--wm-modal);--g-rule:var(--wm-line);
  width:min(1120px,calc(100vw - 64px))!important;height:min(680px,calc(100dvh - 64px))!important;display:flex;flex-direction:column;background:var(--wm-modal)!important;color:var(--wm-t1)!important;font-family:MobbinStudy,var(--tobira-font,system-ui),sans-serif}
:root[data-theme=dark] .webapp-component-popup{--wm-modal:hsl(0 0% 12%);--wm-t1:#fff;--wm-t2:hsl(0 0% 68%);--wm-bg2:hsl(0 0% 100%/6%);--wm-bg3:hsl(0 0% 100%/8%);--wm-line:hsl(0 0% 100%/8%)}
.webapp-component-popup .cs-component-popup-head{flex:none;height:auto!important;padding:20px 24px 16px}
.webapp-component-popup .cs-component-popup-head small{color:var(--wm-t2)}
.webapp-component-popup .cs-component-popup-head>button{background:var(--wm-bg3)!important;color:var(--wm-t1)!important}
.webapp-component-popup .cs-component-popup-scroll{flex:1;min-height:0;height:auto!important;overflow:hidden!important;display:flex;flex-direction:column;padding:0 24px 20px!important}
.webapp-component-popup .cs-component-popup-layout{flex:1;min-height:0;height:auto!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:16px;padding:0!important}
.webapp-component-popup .cs-component-popup-preview{background:var(--wm-bg2)!important;border-radius:16px}
.webapp-component-popup .cs-component-visual{height:100%!important;min-height:0!important;overflow:hidden!important}
.webapp-component-popup .cs-component-visual iframe{width:100%;height:100%!important;min-height:0!important;border:0;background:transparent}
.webapp-component-popup .cs-component-popup-source{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:16px;background:var(--wm-bg2)}
.webapp-component-popup .cs-component-popup-source .site-code-gate{flex:1;align-content:center;gap:8px!important;padding:32px!important;background:transparent!important;color:var(--wm-t1)!important}
.webapp-component-popup .site-code-gate .site-code-gate-title{font-size:18px;line-height:1.4;color:var(--wm-t1)}
.webapp-component-popup .site-code-gate .site-code-gate-note,.webapp-component-popup .site-code-gate [role=status]{margin:0;font-size:13px;line-height:1.7;color:var(--wm-t2)}
.webapp-component-popup .site-code-gate .site-code-gate-primary{width:auto;margin-top:12px;padding:12px 24px;font-size:14px}
.webapp-component-popup .site-code-gate .site-code-gate-link{margin-top:4px;color:var(--wm-t1)}
.webapp-component-popup .cs-code-panes{flex:1;min-height:0;overflow:auto}
.webapp-component-popup .cs-code-tools{flex:none;padding-top:12px}
.webapp-component-popup .cs-code-note{margin:0;color:var(--wm-t2)}
@media(max-width:839px){.webapp-component-popup .cs-component-popup-layout{grid-template-columns:1fr!important;grid-template-rows:minmax(0,40%) minmax(0,1fr)}}

/* TOBIRA's top nav fades away on scrolling down (Mobbin's body[data-navbar-state]); the tab bar then takes its place at
   the very top, and returns under the nav when it comes back. */
.webapp-detail{--wm-top:var(--wm-sticky,0px)}
body[data-navbar-state=hidden] .webapp-detail{--wm-top:0px}
body[data-navbar-state=hidden] .wm-bar{min-height:var(--tb-nav-h,72px)}

/* Flow rows: the strip's cards dim on hover; the row's actions fade in beside the title (100ms); the last viewed
   screen keeps a brand ring after the viewer closes. The strip is padded so the ring is not clipped. */
/* scroll-padding: the first card snaps to the padding edge, not the strip's own edge; without it the strip rests
   6px in, the first card's outline is cut on the left and the 前へ arrow shows on an unscrolled strip (2026-10-03). */

.wm-strip{padding:6px;margin:-6px;scroll-padding-inline:6px}
.wm-strip .wm-card:is(:hover,:focus-visible) .wm-shade,.wm-strip .wm-card:is(:hover,:focus-visible) ~ .wm-shade{opacity:1}
.wm-card.is-last{outline:3px solid var(--wm-brand);outline-offset:3px}
.wm-cell .wm-card.is-last{outline-offset:3px}
.wm-flow-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:16px 0 0}
.wm-flow-actions{position:relative;display:flex;gap:8px;opacity:0;transition:opacity .1s var(--wm-ease)}
.wm-flow:is(:hover,:focus-within) .wm-flow-actions{opacity:1}
@media(hover:none){.wm-flow-actions{opacity:1}}

/* Flow tree (Mobbin's sidebar): sub-flows sit 20px in under the flow they start from; a chevron folds them (height and
   chevron animate); the current flow is primary. Each flow on the right shows its path (parent › …) above its name. */
.wm-side ul.wm-side-tree{margin:24px 0 0}
.wm-side ul ul{margin:0;padding-left:20px;list-style:none}
.wm-side-row{display:flex;align-items:center;gap:4px}
.wm-side-row>a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-side-fold{display:grid;place-items:center;flex:none;width:24px;height:24px;padding:0;border:0;border-radius:6px;background:none;color:var(--wm-t2);cursor:pointer;transition:rotate .24s cubic-bezier(.32,.72,0,1),background-color .15s var(--wm-ease),color .15s var(--wm-ease)}
.wm-side-fold:hover{background:var(--wm-bg3);color:var(--wm-t1)}
.wm-side li.is-folded>.wm-side-row>.wm-side-fold{rotate:180deg}
.wm-side-kids{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s cubic-bezier(.32,.72,0,1),opacity .2s linear}
.wm-side-kids>ul{min-height:0;overflow:hidden}
.wm-side li.is-folded>.wm-side-kids{grid-template-rows:0fr;opacity:0}
.wm-side ul ul a{font-size:15px;line-height:22px;padding:6px 0}
.wm-flow-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 2px;font:456 13px/18px var(--wm-font);color:var(--wm-t3)}
.wm-flow-path a{color:inherit;text-decoration:none;transition:color .15s var(--wm-ease)}
.wm-flow-path a:hover{color:var(--wm-t1)}
@media(prefers-reduced-motion:reduce){.wm-side-kids,.wm-side-fold{transition:none}}

/* Spotlight while scrolling to a chosen flow: the rest dim to 10% (300ms, cubic-bezier(.4,0,.2,1)) and return after. */
.wm-flow{transition:opacity .3s cubic-bezier(.4,0,.2,1)}
.wm-flows.is-focusing .wm-flow:not(.is-target){opacity:.1}

/* Keep code readable even when the component preview shares a short dialog. */
.webapp-component-popup .cs-code-panes{grid-template-rows:repeat(3,minmax(150px,1fr))}
@media(max-height:560px){
  .webapp-component-popup .cs-component-popup-scroll{display:block;overflow:auto!important}
  .webapp-component-popup .cs-component-popup-layout{height:360px!important;grid-template-rows:minmax(0,1fr)}
}
@media(max-height:560px) and (max-width:839px){
  .webapp-component-popup .cs-component-popup-layout{height:536px!important;grid-template-rows:160px 360px}
}
:root[data-theme=dark] .webapp-component-popup .cs-code-panes .cs-code-block{background:#292929}
:root[data-theme=dark] .webapp-component-popup .cs-code-block pre{color:#ededed}
:root[data-theme=dark] .webapp-component-popup .cs-code-block h3{color:#b5b5bb}
:root[data-theme=dark] .webapp-component-popup .cs-code-block .cs-icon-action{color:#b5b5bb}
:root[data-theme=dark] .webapp-component-popup .cs-code-block .cs-icon-action:hover:not(:disabled){background:#3b3b3b;color:#f5f5f5}
/* Branch connectors make the recorded parent path visible at a glance. */
.wm-side-kids>ul{position:relative;margin-left:8px!important;padding-left:20px!important}
.wm-side-kids>ul::before{content:"";position:absolute;top:0;bottom:12px;left:0;width:1px;background:color-mix(in srgb,currentColor 20%,transparent)}
.wm-side-kids>ul>li>.wm-side-row{position:relative}
.wm-side-kids>ul>li>.wm-side-row::before{content:"";position:absolute;left:-20px;top:50%;width:12px;height:1px;background:color-mix(in srgb,currentColor 20%,transparent)}
.wm-side-fold:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Captured screens are concrete leaves beneath every app flow. */
.wm-side-screen .wm-side-row a{font-size:13px;font-weight:400;opacity:.72;line-height:1.5;padding-block:6px;overflow-wrap:anywhere}

/* Preserve the screenshot's actual ratio and give flow labels readable room. */
.wv-shot::after{content:none}
.wv-found>.wv-chip{max-width:none;min-width:0;white-space:normal;overflow:visible;line-height:1.4;overflow-wrap:anywhere}
.wv-found{align-items:center}
.wv-strip .wv-shot{aspect-ratio:var(--wv-ratio,1.6)}

/* Flow viewer: one readable active screen, with a compact sequence below. */
.wv-flow-content{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;min-height:0;min-width:0;overflow:hidden;gap:16px}
.wv-flow-title{font:600 16px/1.4 var(--wm-font);text-align:center;white-space:normal}
.wv-steps{position:relative;display:flex;gap:12px;overflow-x:auto;padding:4px 24px;scrollbar-width:thin;align-items:center;max-width:100%}
.wv-step-card{flex:0 0 104px;display:grid;gap:5px;padding:4px;border:0;border-radius:8px;background:transparent;color:var(--wm-t2);font:500 12px/1.3 var(--wm-font);cursor:pointer;opacity:.65}
.wv-step-thumb{display:block;aspect-ratio:1.6;overflow:hidden;border-radius:4px}.wv-step-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.wv-step-card.is-current{background:var(--wm-bg3);color:var(--wm-t1);opacity:1}.wv-step-label{text-align:center}.wv-step-card:focus-visible{outline:2px solid var(--wm-brand);outline-offset:2px}
.wv-current-label{color:var(--wm-t1);line-height:1.4;overflow-wrap:anywhere}.wv-position{white-space:nowrap;flex:none}.wv-nav:disabled{opacity:.25;cursor:default}
@media(hover:hover){.wv-step-card:hover{background:var(--wm-bg3);opacity:1}}
@media(max-width:719px){.wv-head-mid{min-width:0}.wv-flow-title{font-size:13px}.wv-flow-content{gap:8px}.wv-step-card{flex-basis:76px}.wv-steps{padding-inline:12px;gap:8px}.wv-dialog[data-kind=flow] .wv-nav{display:inline-flex}.wv-dialog[data-kind=flow] .wv-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 44px;align-content:center;gap:12px;padding:8px 12px}.wv-dialog[data-kind=flow] .wv-shot{grid-column:1/-1;grid-row:1;justify-self:center}.wv-dialog[data-kind=flow] .wv-nav{position:static;grid-row:2;translate:none;top:auto}.wv-dialog[data-kind=flow] .wv-nav[data-dir="-1"]{justify-self:end}.wv-dialog[data-kind=flow] .wv-nav[data-dir="1"]{justify-self:start}}

.wv-steps::before,.wv-steps::after{content:"";flex:1 0 0}