/* スマホでの撮影体験を優先し、資料の三列シェルから独立させる。 */
body.prototype { margin: 0 0 0 0; background:#eee7d6; color:#1c2b36; overflow:auto; font-size:14px; }
.prototype * { box-sizing:border-box; }
.prototype [hidden][hidden] { display:none; }
.prototype button { font:inherit; cursor:pointer; }
.prototype button:disabled { opacity:.5; cursor:wait; }
.prototype button:focus-visible,.prototype a:focus-visible,.prototype input:focus-visible { outline:2px solid #99781c; outline-offset:3px; }
.prototype button { -webkit-tap-highlight-color:transparent; }
.workbench { min-height:100dvh; display:grid; grid-template-columns:260px 420px 232px; gap:64px; align-items:center; justify-content:center; padding: 32px 32px 32px 32px; }
.workbench__brand { font-size:20px; font-weight:700; letter-spacing:.1em; text-decoration:none; color:inherit; }
.workbench__eyebrow { font-size:14px; letter-spacing:.12em; color:#786129; margin: 40px 0 20px 0; }
.workbench__intro h1 { font-size:32px; line-height:1.6; margin: 0 0 24px 0; }
.workbench__intro p,.workbench__notes p { line-height:1.9; }
.workbench__intro ol { padding-left:20px; margin: 32px 0 32px 0; line-height:2.4; }
.workbench__note { color:#697071; font-size:14px;  }
.workbench__screen { font-size:24px; font-weight:600; }
.workbench__notes>p { margin-bottom:32px; }
.workbench__intro>.text-link { display:inline-block; margin-bottom:32px; }
.workbench__next { border-top:1px solid #c9bc99;  padding: 16px 0 0 0; }
.workbench__next p { font-weight:600; }
.workbench__next { margin-bottom:24px; }
.workbench__next span { color:#697071; line-height:2; }
.phone { width:420px; height:min(900px,calc(100dvh - 64px)); min-height:700px; background:#f5eedb; border:1px solid #c5bea9; border-radius:4px; box-shadow:0 24px 70px #1c2b3624; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.phone__main { flex:1; min-height:0; overflow:hidden; }
.phone__main>section { height:100%; }
.ui-icon { width:24px; height:24px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.icon-button { border:0; background:transparent; color:inherit; min-width:44px; height:44px; display:inline-flex; justify-content:center; align-items:center; border-radius:4px; }
.camera-screen { background:#202724; color:#f9f4e7; display:flex; flex-direction:column; }
.camera-top { display:flex; align-items:center; justify-content:space-between; padding: 4px 12px 4px 12px; min-height:54px; gap:4px; }
.camera-top__source { display:flex; gap:8px; align-items:center; border:0; background:transparent; color:inherit; padding: 8px 0 8px 0; min-height:44px; }
.camera-top__source .ui-icon { width:20px; height:20px; }
.camera-top__brand { font-size:14px; letter-spacing:.1em; color:#bdbeb4; }
.camera-stage { flex:1; min-height:130px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#161c19; }
.viewfinder { position:relative; overflow:hidden; }
.viewfinder__source,.viewfinder__guide,.viewfinder__flash { position:absolute; inset:0; width:100%; height:100%; }
.viewfinder__source img,.viewfinder__source video { width:100%; height:100%; display:block; object-fit:cover; }
.viewfinder__guide { pointer-events:none; }
.viewfinder__flash { background:white; opacity:0; pointer-events:none; }
.viewfinder__flash--active { animation:shutter-flash 180ms ease-out; }
@keyframes shutter-flash { from { opacity:.7; } to { opacity:0; } }
.camera-bottom { padding: 0 16px 8px 16px; }
.camera-hint { display:flex; align-items:center; gap:8px; min-height:50px; }
.camera-hint p { flex:1; margin: 0 0 0 0; line-height:1.5; font-size:14px; }
.camera-hint__mark { color:#dfc987; font-size:24px; }
.preset-heading { display:flex; justify-content:space-between; align-items:center; color:#c4c6bb; }
.preset-filters { display:flex; gap:12px; }
.preset-filter { min-height:44px; padding:8px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#c4c6bb; white-space:nowrap; }
.preset-filter[aria-pressed="true"] { color:#f7df9c; border-bottom-color:#dfc987; }
.preset-empty { display:flex; align-items:center; min-height:96px; margin:0; padding:12px 0; color:#c4c6bb; font-size:14px; line-height:1.7; }
.camera-link { border:0; background:transparent; color:#dfc987; min-height:40px; padding: 0 0 0 0; }
.preset-strip { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding: 4px 1px 12px 1px; }
.preset-strip::-webkit-scrollbar { display:none; }
.preset { flex:0 0 84px; padding: 0 0 8px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#c4c6bb; text-align:left; }
.preset--active { color:#f7df9c; border-bottom-color:#dfc987; }
.preset__visual { display:block; border:1px solid #536056; border-radius:4px; overflow:hidden; margin-bottom:4px; }
.preset--active .preset__visual { border-color:#dfc987; }
.preset .diagram { width:100%; height:56px; display:block; }
.preset>span:last-child { font-size:14px; }
.shutter-row { display:flex; justify-content:space-between; align-items:center; padding: 0 12px 0 12px; }
.shutter { width:76px; height:76px; border:0; padding: 0 0 0 0; background:transparent; color:#f5eedb; }
.shutter svg { width:100%; height:100%; }
.shutter:active { transform:scale(.94); }
.camera-action { width:88px; min-height:60px; color:#f5eedb; background:transparent; border:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.camera-action strong { font-size:20px; font-weight:500; line-height:24px; }
.mobile-tabs { display:flex; flex-shrink:0; background:#f5eedb; padding: 0 16px max(8px,env(safe-area-inset-bottom)) 16px; border-top:1px solid #d8ceb5; }
.mobile-tabs__item { flex:1; min-height:64px; border:0; border-top:2px solid transparent; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#697071; }
.mobile-tabs__item--active { border-top-color:#947627; color:#1c2b36; }
.mobile-tabs__item--active .ui-icon { stroke-width:2; }
.library-screen,.album-screen { overflow-y:auto; padding: 28px 20px 28px 20px; }
.mobile-head h2 { font-size:28px; margin: 8px 0 12px 0; letter-spacing:.01em; }
.mobile-head>p:last-child { color:#697071; margin: 0 0 0 0; line-height:1.8; }
.mobile-eyebrow { font-size:14px; letter-spacing:.08em; color:#806724; margin: 0 0 0 0; }
.mobile-head { margin-bottom:24px; }
.library-filters { display:flex; border-bottom:1px solid #d5cbb2;  gap:16px; overflow:auto; }
.library-filters__item { flex-shrink:0; padding: 12px 0 12px 0; min-height:44px; background:transparent; border:0; border-bottom:2px solid transparent; color:#697071; }
.library-filters__item--active { color:#1c2b36; border-bottom-color:#947627; }
.library-count { color:#697071; margin: 16px 0 16px 0; }
.mobile-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }
.mobile-guide { min-width:0; position:relative; }
.mobile-guide__open { display:block; width:100%; padding: 0 0 0 0; text-align:left; color:inherit; background:transparent; border:0; }
.mobile-guide__open .diagram { width:100%; height:auto; display:block; border:1px solid #d5cbb2; border-radius:4px; }
.mobile-guide__name { display:block; padding: 12px 32px 4px 0; font-size:16px; line-height:1.6; }
.mobile-guide__scene { color:#697071; font-size:14px; line-height:1.5; }
/* 4 の倍数の例外：図の4:3比率とカード幅から、お気に入りを図の直下へ配置する。 */
.mobile-guide__favorite { position:absolute; right:-4px; top:calc((100vw - 52px) * .375); }
.mobile-guide__favorite[aria-pressed="true"] { color:#8d6821; }
.mobile-guide__favorite[aria-pressed="true"] .ui-icon { fill:#e5d7aa; }
.mobile-button { min-height:48px; border:1px solid #b9ac85; background:#eae1c9; color:#1c2b36; border-radius:4px; padding: 12px 16px 12px 16px; line-height:1.5; }
.mobile-button--primary { background:#dcd0a8; border-color:#947627; font-weight:600; }
.mobile-empty { text-align:center; padding: 68px 0 32px 0; }
.mobile-empty__icon { width:44px; height:44px; fill:none; stroke:#a28c53; stroke-width:1.2; }
.mobile-empty h3 { font-size:20px; line-height:1.6; }
.mobile-empty p { color:#697071; line-height:1.8; }
.result-screen { display:flex; flex-direction:column; overflow-y:auto; }
.result-top { display:flex; align-items:center; justify-content:space-between; padding: 8px 12px 8px 12px; }
.result-top h2 { font-size:16px; margin: 0 0 0 0; }
.result-top>span { color:#697071; font-size:14px; }
.result-photo { flex:1; min-height:180px; padding: 0 20px 0 20px; display:flex; justify-content:center; align-items:center; overflow:hidden; }
.result-photo img { max-width:100%; max-height:100%; object-fit:contain; width:100%; height:100%; }
.result-copy { padding: 20px 20px 12px 20px; }
.result-copy h3 { font-size:24px; margin: 8px 0 8px 0; }
.result-copy>p:not(.mobile-eyebrow) { color:#697071; margin: 0 0 0 0; line-height:1.6; }
.result-actions { display:flex; gap:12px; padding: 12px 20px 12px 20px; }
.result-actions button { flex:1; }
.result-save-note { font-size:14px; padding: 0 20px 16px 20px; line-height:1.6; color:#697071; margin: 0 0 0 0; }
.album-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px;  }
.album-item { background:transparent; border:0; padding: 0 0 0 0; color:inherit; text-align:left; }
.album-item img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:4px; }
.album-item span { display:block;  }
.mobile-toast { position:absolute; bottom:88px; left:16px; right:16px; background:#f5eedb; color:#1c2b36; border:1px solid #b9ac85; border-radius:4px; padding: 16px 16px 16px 16px; margin: 0 0 0 0; line-height:1.6; box-shadow:0 4px 20px #0003; z-index:10; }
.mobile-sheet { position:fixed; inset:auto 0 max(32px,calc((100dvh - 900px)/2)) 0; width:420px; max-width:100%; max-height:80dvh; padding: 0 0 0 0; margin: 0 auto 0 auto; background:#f5eedb; color:#1c2b36; border:1px solid #b9ac85; border-radius:4px; overflow:auto; }
.mobile-sheet::backdrop { background:#111b1988; }
.mobile-sheet__head { display:flex; align-items:center; justify-content:space-between; padding: 16px 20px 8px 20px; }
.mobile-sheet__head h2 { font-size:20px; margin: 0 0 0 0; }
.mobile-sheet__body { padding: 8px 20px 24px 20px; }
.mobile-sheet__body p { line-height:1.8; color:#626967; }
.mobile-sheet__body .diagram { display:block; width:100%; height:auto; border-radius:4px; }
.mobile-sheet__body .mobile-button { width:100%;  }
.sheet-definition { margin: 16px 0 16px 0; }
.sheet-definition dt { font-weight:600;  }
.sheet-definition dd { margin: 8px 0 8px 0; line-height:1.8; }
.sheet-source { display:flex; flex-direction:column; gap:8px; }
.sheet-control { display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 16px 0 16px 0; border-bottom:1px solid #d5cbb2; }
.sheet-control input[type="range"] { width:65%; accent-color:#8d742d; }
.sheet-control input[type="checkbox"] { width:24px; height:24px; accent-color:#8d742d; }
.mobile-sheet__body .sheet-error { color:#923f32; }
@media (min-width:900px) { .mobile-guide__favorite { top:140px; } }
@media (max-width:1199px) and (min-width:900px) { .workbench { grid-template-columns:248px 420px; gap:48px; } .workbench__notes { display:none; } }
@media (max-width:899px) { .workbench { display:block; padding: 0 0 0 0; min-height:100dvh; } .workbench__intro,.workbench__notes { display:none; } .phone { width:100%; height:100dvh; min-height:580px; border:0; border-radius:0px; box-shadow:none; } .camera-top { padding: max(4px,env(safe-area-inset-top)) 12px 4px 12px; } .mobile-sheet { width:100%; bottom:0; padding-bottom:env(safe-area-inset-bottom); } .mobile-guide__favorite { top:calc((100vw - 52px) * .375); } }
@media (max-width:360px) { .camera-top__brand { display:none; } .camera-bottom { padding-inline:12px; } .library-screen,.album-screen { padding-inline:16px; } .library-filters { gap:12px; } .mobile-guide__favorite { top:calc((100vw - 44px) * .375); } }
@media (prefers-reduced-motion:reduce) { .viewfinder__flash--active { animation:none; } .shutter:active { transform:none; } }
/* 編集と録画は既存の色・下線選択・4px角丸を引き継ぐ。 */
.capture-modes { display:flex; align-items:center; gap:20px; padding:0 12px 0 12px; }
.capture-modes__item { min-height:44px; background:transparent; border:0; border-bottom:2px solid transparent; color:#c4c6bb; padding:4px 0 4px 0; }
.capture-modes__item--active { color:#f7df9c; border-bottom-color:#dfc987; }
.capture-modes>span { margin-left:auto; color:#c4c6bb; }
.record-status { margin:4px 0 4px 0; color:#f1c1b4; line-height:1.6; font-variant-numeric:tabular-nums; }
.record-error { margin:8px 0 8px 0; color:#ffc9bf; line-height:1.6; }
.shutter--video { color:#e38573; }
.shutter--recording svg { display:none; }
/* 4 の倍数の例外：76pxのシャッター領域の中央に48pxの停止ボタンを置く余白。 */
.shutter--recording { background:#e38573; width:48px; height:48px; border:4px solid #f5eedb; border-radius:4px; margin:14px 14px 14px 14px; }
.result-photo video { width:100%; height:100%; max-height:100%; object-fit:contain; background:#202724; }
.result-edit { padding:0 20px 0 20px; }
.result-edit button { width:100%; }
.result-edit p { font-size:14px; color:#697071; line-height:1.6; margin:0 0 0 0; }
.editor-screen { display:flex; flex-direction:column; overflow-y:auto; }
.editor-screen .result-top { flex-shrink:0; }
.editor-screen .camera-link { color:#735d23; padding:0 4px 0 4px; }
.editor-instruction { margin:0 0 12px 0; padding:0 20px 0 20px; color:#697071; line-height:1.6; }
.editor-stage { flex:1; min-height:180px; display:flex; align-items:center; justify-content:center; background:#ddd5c0; overflow:hidden; }
.editor-surface { position:relative; flex-shrink:0; }
.editor-surface canvas,.editor-overlay { display:block; width:100%; height:100%; }
.editor-overlay { position:absolute; inset:0; touch-action:none; cursor:crosshair; }
.editor-controls { padding:16px 20px 16px 20px; flex-shrink:0; }
.editor-tools { display:flex; gap:8px; margin-bottom:12px; }
.editor-tools button { flex:1; padding:8px 4px 8px 4px; min-height:44px; }
.editor-regions { display:flex; gap:8px; overflow-x:auto; margin-bottom:12px; }
.region-button { flex-shrink:0; min-height:44px; padding:8px 4px 8px 4px; color:inherit; background:transparent; border:0; border-bottom:2px solid transparent; }
.region-button[aria-pressed="true"] { border-bottom-color:#947627; }
.editor-strength { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.editor-strength input { width:100%; accent-color:#947627; }
.editor-strength>span { color:#697071; width:100%; text-align:center; }
.editor-numeric summary { min-height:44px; cursor:pointer; line-height:1.6; padding:12px 0 12px 0; }
.editor-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.editor-fields label { display:flex; flex-direction:column; gap:4px; }
.editor-fields input { width:100%; min-height:44px; font-size:16px; padding:8px 8px 8px 8px; color:inherit; background:#fff9e9; border:1px solid #b9ac85; border-radius:4px; }
.editor-help { margin:0 0 0 0; font-size:14px; line-height:1.7; color:#697071; }
.settings-screen { overflow-y:auto; padding:28px 20px 28px 20px; }
.settings-group { border-top:1px solid #d5cbb2; padding:20px 0 0 0; margin-bottom:28px; }
.settings-group h3 { font-size:20px; margin:0 0 20px 0; }
.settings-group>p { color:#697071; line-height:1.8; }
.settings-switch { display:grid; grid-template-columns:minmax(0,1fr) 44px 32px; align-items:center; gap:4px 8px; min-height:72px; margin-bottom:12px; cursor:pointer; }
.settings-switch>span:first-child { display:contents; }
.settings-switch strong { display:block; grid-column:1; grid-row:1; font-size:16px; line-height:1.6; text-wrap:pretty; }
.settings-switch small { display:block; grid-column:1 / -1; grid-row:2; color:#697071; font-size:14px; line-height:1.7; }
.settings-switch input { appearance:none; position:relative; grid-column:2; grid-row:1; width:44px; height:28px; margin:0; border:1px solid #9b927b; border-radius:4px; background:#dcd6c5; cursor:pointer; }
.settings-switch input::after { content:''; display:block; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:4px; background:#fcf8e9; box-shadow:0 1px 3px #0002; }
.settings-switch input:checked { background:#76632e; border-color:#76632e; }
/* 4 の倍数の例外：44px幅から枠線・つまみ20px・余白3pxを引いた位置。 */
.settings-switch input:checked::after { left:19px; }
.settings-switch__state { grid-column:3; grid-row:1; width:32px; font-weight:600; color:#735d23; white-space:nowrap; }
.settings-note { font-size:14px; line-height:1.8; color:#697071; margin:0 0 20px 0; }
.settings-screen p,.settings-switch small { line-break:strict; word-break:normal; overflow-wrap:anywhere; text-wrap:pretty; }
.settings-line { display:block; }
#test-sound { margin-bottom:12px; }
#invitation-status { white-space:pre-line; }
.settings-invitation { margin-top:28px; margin-bottom:0; }
.settings-invitation form { display:grid; gap:12px; }
.settings-invitation label { font-weight:600; }
.settings-invitation input { width:100%; min-width:0; min-height:48px; padding:12px; font:inherit; font-size:16px; color:inherit; background:#fff9e9; border:1px solid #b9ac85; border-radius:4px; }
.settings-invitation input[aria-invalid="true"] { border-color:#a03a26; }
.settings-invitation .settings-note { margin-bottom:0; overflow-wrap:anywhere; }
.settings-invitation #invitation-help { margin-bottom:16px; }
.settings-pwa { border-top:1px solid #d5cbb2; margin-top:28px; padding-top:20px; }
.settings-pwa h3 { margin-bottom:12px; }
.settings-pwa p { margin-bottom:12px; }
.settings-privacy-link { display:block; margin-top:16px; }

/* The installed app uses the full screen, including on tablets. */
.native-app .workbench { display:block; min-height:100dvh; padding:0; }
.native-app .workbench__intro,.native-app .workbench__notes { display:none; }
.native-app .phone { width:100%; height:100dvh; min-height:0; border:0; border-radius:0; box-shadow:none; padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.native-app .camera-top { padding-top:4px; }
@media (max-height:740px) { .camera-hint { min-height:44px; } .preset .diagram { height:40px; } .camera-bottom { padding-bottom:4px; } .camera-hint p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } }

.mobile-toast { pointer-events:none; }