/* Hushframe — "pearl crescent" identity on an Apple-like Liquid Glass structure (a web approximation, not Apple's native material).
   Scheme: html[data-theme] is set by js/theme.js (自動 = prefers-color-scheme, or a stored ライト/ダーク choice).
   8pt grid; type 34/17/13. One static background layer; real backdrop blur only on the tab bar, sheet and toast.
   Animations: transform/opacity only. The photo itself never receives a filter, tint, blur or blend. */
@font-face { font-family: "Hush Wordmark"; src: url("../fonts/jost-light-wordmark.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; } /* Jost Light, OFL-1.1, subset to the wordmark letters */
:root {
  color-scheme: light; -webkit-text-size-adjust: 100%;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
  --font-mark: "Hush Wordmark", -apple-system, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --r-card: 32px; --r-group: 16px; --r-ctl: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: linear(0, 0.0187, 0.0676, 0.1374, 0.2202, 0.3098, 0.4013, 0.491, 0.576, 0.6546, 0.7256, 0.7884, 0.8427, 0.8889, 0.9274, 0.9587, 0.9835, 1.0026, 1.0168, 1.0268, 1.0333, 1.0369, 1.0383, 1.038, 1.0364, 1.034, 1.0309, 1.0275, 1.024, 1.0205, 1.0172, 1.0141, 1.0113, 1.0088, 1.0066, 1.0047, 1.0032, 1.0019, 1.0009, 1.0001, 0.9995, 0.9991, 0.9988, 0.9986, 0.9985, 0.9985, 0.9986, 0.9987, 0.9988, 0.9989, 0.999, 0.9992, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9998, 0.9999, 0.9999, 1, 1, 1, 1, 1); /* damped spring ζ≈.72, 65 samples (smooth at 120 Hz) */
  --t-press: 90ms; --t-fast: 180ms; --t-med: 240ms; --t-sheet: 320ms; --t-screen: 320ms;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);

  /* light: pearl haze */
  --label: #1a1624; --label-2: #4a4458; --label-3: #5d566c;
  --tint: #6247a8; --link: #5a3fa0; --tint-soft: rgba(124, 96, 196, .14);
  --moon-1: #f1f0f6; --moon-2: #b3b1c2; --moon-3: #807d92;
  --bg-base: #f4f1f7;
  --glass-fill: linear-gradient(165deg, rgba(255, 255, 255, .7), rgba(250, 244, 252, .42) 55%, rgba(244, 248, 252, .5));
  --rim-a: rgba(255, 255, 255, .98); --rim-b: rgba(214, 198, 255, .7); --rim-c: rgba(255, 206, 230, .65); --rim-d: rgba(196, 238, 228, .7); --rim-soft: rgba(255, 255, 255, .35);
  --glass-inner-hi: rgba(255, 255, 255, .9); --glass-inner-lo: rgba(80, 60, 120, .1);
  --glass-drop: 0 14px 34px -18px rgba(70, 50, 110, .3), 0 1px 3px rgba(70, 50, 110, .06);
  --group: rgba(255, 255, 255, .72); --group-sep: rgba(74, 68, 88, .16);
  --ctl: rgba(120, 110, 140, .13); --ctl-on: #ffffff;
  --field: rgba(255, 255, 255, .9); --field-line: rgba(74, 68, 88, .22);
  --ok: #146b34; --ok-bg: rgba(52, 199, 89, .18); --found: #b3261e; --found-bg: rgba(255, 69, 58, .14); --warn: #7a4a00; --warn-bg: rgba(255, 204, 0, .26);
  --chg: #0b49b0; --chg-bg: rgba(10, 132, 255, .14); --info-bg: rgba(118, 118, 128, .14);
  --cta-fill: linear-gradient(120deg, #e4d9fb 0%, #f1dcf0 48%, #fbe1e6 78%, #e3f1f1 100%);
  --cta-ink: #2b2140; --cta-rim: rgba(255, 255, 255, .95); --cta-glow: rgba(150, 110, 210, .45);
  --backdrop: rgba(40, 28, 64, .18);
  --sheet-fill: linear-gradient(180deg, rgba(253, 251, 255, .86), rgba(248, 244, 252, .8));
  --dock-fill: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(252, 247, 253, .48));
  --toast-fill: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(250, 246, 253, .86));
  --solid: #f7f4f9;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --label: #f4f2fa; --label-2: #cdc8dc; --label-3: #aaa4bf;
  --tint: #cbbcff; --link: #cdbfff; --tint-soft: rgba(190, 170, 255, .16);
  --moon-1: #f4f3fa; --moon-2: #c2c0d0; --moon-3: #8e8ba2;
  --bg-base: #0b0a18;
  --glass-fill: linear-gradient(165deg, rgba(255, 255, 255, .14), rgba(220, 200, 255, .06) 55%, rgba(200, 240, 240, .05));
  --rim-a: rgba(255, 255, 255, .42); --rim-b: rgba(190, 168, 255, .34); --rim-c: rgba(255, 180, 220, .26); --rim-d: rgba(170, 236, 224, .28); --rim-soft: rgba(255, 255, 255, .08);
  --glass-inner-hi: rgba(255, 255, 255, .22); --glass-inner-lo: rgba(0, 0, 0, .35);
  --glass-drop: 0 18px 42px -18px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .4);
  --group: rgba(255, 255, 255, .075); --group-sep: rgba(255, 255, 255, .12);
  --ctl: rgba(150, 140, 180, .24); --ctl-on: rgba(255, 255, 255, .2);
  --field: rgba(255, 255, 255, .08); --field-line: rgba(255, 255, 255, .2);
  --ok: #6fe496; --ok-bg: rgba(48, 209, 88, .16); --found: #ffa39b; --found-bg: rgba(255, 69, 58, .18); --warn: #ffd560; --warn-bg: rgba(255, 214, 10, .15);
  --chg: #9cc4ff; --chg-bg: rgba(10, 132, 255, .22); --info-bg: rgba(118, 118, 128, .26);
  --cta-fill: linear-gradient(120deg, rgba(150, 124, 230, .62) 0%, rgba(176, 116, 190, .56) 55%, rgba(120, 150, 200, .5) 100%);
  --cta-ink: #ffffff; --cta-rim: rgba(255, 255, 255, .45); --cta-glow: rgba(150, 120, 255, .42);
  --backdrop: rgba(0, 0, 0, .48);
  --sheet-fill: linear-gradient(180deg, rgba(40, 36, 62, .86), rgba(22, 20, 38, .84));
  --dock-fill: linear-gradient(180deg, rgba(66, 60, 96, .55), rgba(32, 29, 52, .5));
  --toast-fill: linear-gradient(180deg, rgba(56, 52, 82, .9), rgba(36, 33, 56, .88));
  --solid: #1b1928;
}
@supports not (transition-timing-function: linear(0, 1)) { :root { --spring: cubic-bezier(.34, 1.3, .64, 1); } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); font-size: 17px; line-height: 1.4; letter-spacing: -.01em; color: var(--label); background: var(--bg-base); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
[hidden] { display: none !important; }
svg { display: block; }

/* ---------- background: one static layer (light: pearl haze / dark: indigo night with moonlight) ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict;
  background:
    radial-gradient(65% 40% at 12% 6%, rgba(226, 214, 248, .85), transparent 70%),
    radial-gradient(55% 38% at 96% 26%, rgba(250, 222, 236, .75), transparent 70%),
    radial-gradient(60% 40% at 6% 78%, rgba(214, 238, 236, .55), transparent 70%),
    radial-gradient(70% 45% at 85% 100%, rgba(236, 226, 248, .8), transparent 70%),
    linear-gradient(180deg, #f3eff8 0%, #f6f3f8 50%, #f7f1f4 100%); }
[data-theme="dark"] .bg { background:
    radial-gradient(38% 24% at 86% 6%, rgba(226, 226, 255, .12), transparent 70%),
    radial-gradient(55% 32% at 30% 0%, rgba(118, 92, 210, .26), transparent 70%),
    radial-gradient(42% 28% at 4% 46%, rgba(190, 100, 170, .14), transparent 70%),
    radial-gradient(40% 28% at 98% 58%, rgba(90, 170, 200, .1), transparent 70%),
    radial-gradient(55% 30% at 60% 100%, rgba(110, 80, 190, .16), transparent 70%),
    linear-gradient(180deg, #110f24 0%, #0b0a18 55%, #07060f 100%); }

/* ---------- pearl Liquid Glass material ---------- */
.lg { position: relative; background: var(--glass-fill);
  box-shadow: inset 0 1px 0 var(--glass-inner-hi), inset 0 -1px 0 var(--rim-soft), inset 0 10px 22px -16px var(--glass-inner-hi), inset 0 -14px 24px -20px var(--glass-inner-lo), var(--glass-drop); }
.lg::before { /* 1px iridescent specular rim: white → lavender → pink → mint sheen */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, var(--rim-a) 0%, var(--rim-b) 18%, transparent 42%, var(--rim-c) 68%, var(--rim-d) 86%, var(--rim-a) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.blur { -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.glass-btn { background: var(--glass-fill); box-shadow: inset 0 1px 0 var(--glass-inner-hi), inset 0 0 0 1px var(--rim-soft), inset 0 -8px 14px -12px var(--glass-inner-lo), 0 6px 16px -10px rgba(40, 20, 80, .35); }

/* ---------- top bar: thin, wide-tracked wordmark ---------- */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s2); max-width: 760px; margin: 0 auto; padding: calc(var(--s2) + var(--safe-t)) calc(var(--s2) + 4px + var(--safe-r)) var(--s1) calc(var(--s2) + 4px + var(--safe-l)); }
.brand-line { display: flex; align-items: center; gap: 10px; min-height: 41px; }
.brand-mark { flex: none; display: grid; place-items: center; }
.brand-mark svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1.5px rgba(60, 40, 100, .25)); }
.large-title { margin: 0; font-family: var(--font-mark); font-size: 32px; line-height: 41px; font-weight: 300; letter-spacing: .22em; margin-right: -.22em; }
.tagline { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--label-2); }
.top-actions { display: flex; gap: var(--s1); padding-top: 0; }
.circle-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--label); font-size: 13px; font-weight: 700; }
.circle-btn svg { width: 22px; height: 22px; }
body.in-editor .large-title { font-size: 21px; line-height: 28px; letter-spacing: .2em; }
body.in-editor .brand-line { min-height: 44px; } body.in-editor .brand-mark svg { width: 18px; height: 18px; }
body.in-editor .tagline { display: none; }
body.in-editor .topbar { padding-bottom: 0; align-items: center; }

.screen { max-width: 760px; margin: 0 auto; padding: var(--s1) calc(var(--s2) + 4px + var(--safe-r)) calc(120px + var(--safe-b)) calc(var(--s2) + 4px + var(--safe-l)); }
/* screen transitions (fallback when the View Transitions API is unavailable): push / pop, transform+opacity only */
.screen.enter { animation: rise var(--t-med) var(--ease) both; }
.screen.push-in { animation: push-in var(--t-screen) var(--spring) both; }
.screen.pop-in { animation: pop-in var(--t-screen) var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } }
@keyframes push-in { from { opacity: 0; transform: translate3d(28%, 0, 0) scale(.985); } 60% { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translate3d(-22%, 0, 0) scale(.985); } 60% { opacity: 1; } }
.reveal { animation: reveal var(--t-screen) var(--spring) both; }
@keyframes reveal { from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); } }
/* View Transitions: only the screen content moves; header and tab bar stay put. Taps pass through during the animation. */
.screen { view-transition-name: hf-screen; }
.topbar { view-transition-name: hf-top; } .dock { view-transition-name: hf-dock; }
::view-transition { pointer-events: none; }
::view-transition-group(hf-screen) { animation-duration: var(--t-screen); animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(hf-screen) { animation: vt-out var(--t-screen) cubic-bezier(.3, .7, .2, 1) both; }
::view-transition-new(hf-screen) { animation: vt-in var(--t-screen) cubic-bezier(.2, .8, .2, 1) both; }
:root.vt-back::view-transition-old(hf-screen) { animation-name: vt-out-back; }
:root.vt-back::view-transition-new(hf-screen) { animation-name: vt-in-back; }
::view-transition-old(hf-top), ::view-transition-new(hf-top), ::view-transition-old(hf-dock), ::view-transition-new(hf-dock) { animation-duration: var(--t-fast); }
@keyframes vt-in { from { opacity: 0; transform: translate3d(30%, 0, 0) scale(.985); } 55% { opacity: 1; } }
@keyframes vt-out { to { opacity: 0; transform: translate3d(-18%, 0, 0) scale(.97); } }
@keyframes vt-in-back { from { opacity: 0; transform: translate3d(-22%, 0, 0) scale(.985); } 55% { opacity: 1; } }
@keyframes vt-out-back { to { opacity: 0; transform: translate3d(26%, 0, 0) scale(.97); } }

/* ---------- press feedback ---------- */
.press { transition: transform 260ms var(--spring), opacity var(--t-fast) var(--ease); }
.press:active:not([disabled]) { transform: scale(.97); transition-duration: var(--t-press); transition-timing-function: var(--ease); }
.press:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; }

/* ---------- capsules: pearl / lavender glass ---------- */
.capsule { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s1); width: 100%; min-height: 56px; padding: 0 var(--s3); border: 0; border-radius: var(--r-ctl); cursor: pointer; overflow: hidden; font-size: 17px; font-weight: 700; }
.capsule .ci svg, .capsule svg { width: 22px; height: 22px; flex: none; }
.capsule > span:not(.ci):not(.chev-r) { display: inline-flex; align-items: center; gap: var(--s1); }
.capsule .chev-r { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); opacity: .8; } .capsule .chev-r svg { width: 18px; height: 18px; }
.capsule.tinted, .dock .tab.main.cta:not([disabled]) { color: var(--cta-ink); background: var(--cta-fill);
  box-shadow: inset 0 1px 0 var(--cta-rim), inset 0 0 0 1px color-mix(in srgb, var(--cta-rim) 45%, transparent), inset 0 -10px 18px -12px rgba(90, 60, 140, .28), 0 12px 26px -14px var(--cta-glow); }
.capsule.tinted::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 60%); pointer-events: none; } /* full-bleed sheen following the button shape (an inset pill read as a doubled button) */
[data-theme="dark"] .capsule.tinted::after { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%); }
.capsule.plain { color: var(--link); background: var(--ctl); min-height: 50px; font-weight: 600; }
.capsule[disabled] { color: var(--label-3); background: var(--ctl); box-shadow: none; cursor: not-allowed; }
.capsule[disabled]::after { display: none; }

/* ---------- home ---------- */
.empty-card { margin-top: var(--s1); border-radius: var(--r-card); padding: var(--s1); overflow: hidden; }
.placeholder { position: relative; height: 196px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(60% 80% at 25% 30%, rgba(226, 212, 252, .7), transparent 70%), radial-gradient(55% 80% at 80% 70%, rgba(252, 220, 234, .6), transparent 70%), radial-gradient(40% 60% at 70% 15%, rgba(210, 240, 236, .5), transparent 70%), rgba(255, 255, 255, .4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
[data-theme="dark"] .placeholder { background: radial-gradient(60% 80% at 25% 35%, rgba(120, 92, 220, .3), transparent 70%), radial-gradient(55% 80% at 80% 65%, rgba(200, 110, 170, .16), transparent 70%), radial-gradient(40% 60% at 75% 15%, rgba(120, 200, 210, .1), transparent 70%), rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ph-slab { position: absolute; border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 16px 30px -18px rgba(70, 50, 110, .35); }
.ph-slab.s1 { width: 46%; height: 62%; left: 18%; top: 20%; transform: rotate(-7deg); }
.ph-slab.s2 { width: 46%; height: 62%; left: 36%; top: 16%; transform: rotate(5deg); }
[data-theme="dark"] .ph-slab { background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 30px -18px rgba(0, 0, 0, .8); }
.ph-glyph { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; display: grid; place-items: center; color: var(--moon-3);
  background: var(--glass-fill); box-shadow: inset 0 1px 0 var(--glass-inner-hi), inset 0 0 0 1px var(--rim-soft), 0 10px 24px -12px rgba(40, 20, 80, .35); }
[data-theme="dark"] .ph-glyph { color: var(--moon-2); }
.ph-glyph svg { width: 30px; height: 30px; }
.empty-text { padding: var(--s2) var(--s2) var(--s1); }
.empty-text h2 { margin: 0; font-size: 20px; line-height: 25px; font-weight: 600; }
.empty-text p { margin: 4px 0 0; font-size: 15px; color: var(--label-2); }
#pickBtn { margin-top: var(--s2); }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); margin: var(--s3) 0 var(--s2); }
.feat { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: 0; border: 0; background: none; cursor: pointer; color: var(--label); min-height: 44px; }
.feat .circle { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #5a4a86; }
.feat .circle svg { width: 28px; height: 28px; }
.feat[data-feat="Format"] .circle { color: #84466f; } .feat[data-feat="Size"] .circle { color: #3d6b6a; }
[data-theme="dark"] .feat .circle { color: #ddd4ff; } [data-theme="dark"] .feat[data-feat="Format"] .circle { color: #f6d0e6; } [data-theme="dark"] .feat[data-feat="Size"] .circle { color: #c8ece6; }
.feat .ft { font-size: 13px; line-height: 18px; font-weight: 600; }
.privacy { display: flex; gap: var(--s1); align-items: flex-start; margin: var(--s2) 4px 0; font-size: 13px; line-height: 18px; color: var(--label-2); }
.privacy svg { flex: none; width: 18px; height: 18px; color: var(--moon-3); }
[data-theme="dark"] .privacy svg { color: var(--moon-2); }
.link { border: 0; background: none; padding: 0 2px; min-height: 0; color: var(--link); font-weight: 600; cursor: pointer; font-size: inherit; }
.privacy .link, .sec-f .link { padding: 12px 4px; margin: -12px 0; } /* 44pt touch area without changing layout */

/* ---------- editor ---------- */
.preview { position: relative; padding: 0; }
/* The frame takes the photo's real display aspect ratio (aspect-ratio + width set inline from JS from the decoded/oriented dimensions) and is
   capped by --frame-max-h, so the whole photo is always visible (never cropped) for portrait, landscape, panorama and square.
   Both views share the same frame box (sized from the original), so toggling before/after never jumps; an output with a
   different ratio (custom size) is letterboxed inside it at its true ratio via object-fit: contain. */
.preview { --frame-max-h: 62vh; --frame-max-h: min(58svh, 560px); }
.frame { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center;
  width: min(100%, calc(var(--frame-max-h) * 1.333333)); max-height: var(--frame-max-h); margin: 0 auto;
  background: repeating-conic-gradient(rgba(127, 127, 127, .14) 0 25%, transparent 0 50%) 0 0 / 16px 16px, rgba(127, 127, 127, .06); }
.frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: 50% 50%; image-orientation: from-image; /* never filtered, tinted or blurred; never cropped */ }
.frame img[hidden] { display: none; }
.frame[data-tall] { --frame-max-h: 84vh; --frame-max-h: min(84svh, calc(100svh - 140px), 980px); } /* tall portrait (e.g. 923×2000, screenshots): as large as possible; the 元画像/処理後 toggle is one short scroll below */
.pane-left .frame[data-tall] { --frame-max-h: 60vh; --frame-max-h: min(60dvh, 760px); }
.pv-dims { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--label-3); font-variant-numeric: tabular-nums; letter-spacing: .01em; min-height: 1.3em; }
.frame .ph { color: var(--label-3); font-size: 15px; padding: var(--s3); text-align: center; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: var(--r-ctl); background: var(--ctl); }
.seg button { min-height: 40px; padding: 0 var(--s2); border: 0; border-radius: var(--r-ctl); background: transparent; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--label);
  transition: background-color var(--t-fast) var(--ease), transform 240ms var(--spring); }
.seg.floating button { transition: transform 240ms var(--spring); }
.seg button:active:not([disabled]) { transform: scale(.97); transition-duration: var(--t-press); }
.seg button[aria-pressed="true"] { background: var(--ctl-on); box-shadow: 0 3px 8px -2px rgba(40, 20, 80, .16), 0 0 0 .5px rgba(40, 20, 80, .05); }
.seg button:disabled { color: var(--label-3); cursor: not-allowed; }
.group .seg button { padding: 0 8px; font-size: 14px; }
/* floating glass segmented control sits below the photo (never overlaps photo pixels) */
.seg.floating { position: relative; width: min(280px, 80%); margin: 12px auto 0; padding: 4px; border-radius: var(--r-ctl); background: var(--glass-fill); }
.seg.floating button { min-height: 44px; }
/* Before/after toggle: one Liquid Glass pill slides between the segments (translate, spring) and squashes/stretches via WAAPI `scale` (main.js). */
.seg.floating button { position: relative; z-index: 1; }
.seg.floating button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.seg-pill { position: absolute; z-index: 0; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 10px) / 2); border-radius: var(--r-ctl); pointer-events: none;
  background: var(--ctl-on); box-shadow: 0 3px 8px -2px rgba(40, 20, 80, .16), 0 0 0 .5px rgba(40, 20, 80, .05), inset 0 1px 0 rgba(255, 255, 255, .35);
  translate: 0 0; scale: 1; transition: translate 460ms var(--spring), scale 200ms var(--spring); will-change: translate, scale; }
.seg.floating[data-sel="proc"] .seg-pill { translate: calc(100% + 2px) 0; }
.seg.floating:has(button:active:not([disabled])) .seg-pill, .seg.floating.pressing .seg-pill { scale: .96; transition-duration: 460ms, var(--t-press); }
.seg.floating button:active:not([disabled]) { transform: scale(.96); }
.frame #pvAlt { z-index: 1; pointer-events: none; opacity: 0; }
.frame #pv, .frame #pvAlt { will-change: opacity, transform; backface-visibility: hidden; } /* own compositor layers: the switch only animates opacity/transform */
@media (prefers-reduced-motion: reduce) { .seg-pill { transition: none; } .seg.floating:has(button:active) .seg-pill { scale: 1; } }

.work-sheet { margin-top: var(--s2); border-radius: 34px 34px 28px 28px; padding: var(--s2) var(--s2) var(--s2); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--label) 24%, transparent); margin: 0 auto var(--s1); }
.group-sec { margin-top: var(--s2); } .work-sheet > .group-sec:first-child { margin-top: 0; }
.sec-h { margin: 0 0 6px; padding: 0 var(--s2); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .02em; color: var(--label-2); text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; }
.sec-f { margin: 6px 0 0; padding: 0 var(--s2); font-size: 13px; line-height: 18px; color: var(--label-2); }
.group { background: var(--group); border-radius: var(--r-group); overflow: hidden; }
.group.pad { padding: var(--s2); }
.kv { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: 15px; }
.kv dt, .kv dd { padding: 11px 0; border-top: .5px solid var(--group-sep); margin: 0; min-height: 44px; }
.kv dt { padding-left: var(--s2); color: var(--label-2); } .kv dd { padding: 11px var(--s2) 11px var(--s2); text-align: right; word-break: break-word; }
.kv dt:first-of-type, .kv dt:first-of-type + dd { border-top: 0; }
.notice { margin-top: var(--s1); padding: 12px var(--s2); border-radius: var(--r-group); font-size: 13px; line-height: 18px; background: var(--warn-bg); color: var(--label); }
.notice.err { background: var(--found-bg); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { position: relative; }
.rows li + li::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; border-top: .5px solid var(--group-sep); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px 8px var(--s2); border: 0; border-radius: 0; cursor: pointer; text-align: left; background: transparent; color: var(--label); }
.row:active { background: color-mix(in srgb, var(--label) 8%, transparent); }
.row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 17px; line-height: 22px; }
.row .chev { color: var(--label-3); display: grid; } .row .chev svg { width: 14px; height: 14px; stroke-width: 2.6; }
/* row icons: quiet pearl-toned tiles (distinct from the green/red/yellow status pills) */
.gicon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 0 .5px rgba(0, 0, 0, .08); }
.gicon svg { width: 18px; height: 18px; stroke-width: 2.1; }
.c-blue { background: linear-gradient(160deg, #8a9be0, #6474c4); } .c-red { background: linear-gradient(160deg, #cf8aa6, #a9637f); } .c-gray { background: linear-gradient(160deg, #a8a6b6, #7f7c90); }
.c-indigo { background: linear-gradient(160deg, #9b8ce0, #7465bf); } .c-green { background: linear-gradient(160deg, #82b6a8, #5a8f82); } .c-orange { background: linear-gradient(160deg, #d6a98a, #b07f63); }
.c-purple { background: linear-gradient(160deg, #b597de, #8e6dbd); } .c-teal { background: linear-gradient(160deg, #86b6c8, #5e8fa3); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 7px; border-radius: 999px; font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.badge svg { width: 14px; height: 14px; }
.b-absent { background: var(--ok-bg); color: var(--ok); } .b-present { background: var(--found-bg); color: var(--found); } .b-unknown { background: var(--warn-bg); color: var(--warn); } .b-changed { background: var(--chg-bg); color: var(--chg); } .b-info { background: var(--info-bg); color: var(--label-2); }
details.more { margin-top: var(--s2); } details.more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 var(--s2); font-weight: 600; font-size: 15px; color: var(--link); }
.field { display: grid; gap: 6px; margin-top: var(--s2); }
.group.pad > .field:first-child { margin-top: 0; }
.field.inline { grid-template-columns: 1fr auto; align-items: center; }
.field label, .lbl { font-size: 13px; font-weight: 600; color: var(--label-2); }
.lbl { display: block; margin: var(--s2) 0 6px; }
.input, select.input { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--field); font-size: 17px; /* ≥16px avoids iOS zoom */ color: var(--label); }
.input.color { width: 64px; padding: 4px; }
.input[aria-invalid="true"] { border-color: #ff453a; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 15px; margin-top: var(--s1); }
.check input { width: 22px; height: 22px; accent-color: var(--tint); flex: none; }
.hint { font-size: 13px; line-height: 18px; color: var(--label-2); margin: 6px 0 0; }
.changes { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.changes li { display: flex; gap: 10px; align-items: flex-start; padding: 12px var(--s2); }
.changes li + li { border-top: .5px solid var(--group-sep); }
.changes li.warn { background: var(--warn-bg); } .changes li.err { background: var(--found-bg); }
.changes svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
#verifyBody .changes { margin: var(--s1) calc(var(--s2) * -1) 0; }
.checks li.pass svg { color: var(--ok); } .checks li.fail svg { color: var(--found); } .checks li.warn svg { color: var(--warn); } .changes li.info svg, .changes li:not(.warn):not(.err):not(.pass):not(.fail) svg { color: var(--label-3); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 16px; word-break: break-all; color: var(--label-2); }
.result-head { display: flex; align-items: center; gap: 10px; padding: 12px var(--s2); border-radius: 12px; font-weight: 700; }
.result-head svg { flex: none; width: 22px; height: 22px; }
.result-head.ok { background: var(--ok-bg); color: var(--ok); } .result-head.ng { background: var(--found-bg); color: var(--found); }
.cmp { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: var(--s1); } .cmp th, .cmp td { text-align: left; padding: 8px 4px; border-top: .5px solid var(--group-sep); vertical-align: top; word-break: break-word; } .cmp th { color: var(--label-2); font-weight: 600; }
.range { width: 100%; accent-color: var(--tint); min-height: 44px; }
.save-actions { display: grid; gap: 12px; margin-top: var(--s2); }
.save-hint { display: flex; gap: var(--s1); align-items: flex-start; font-size: 13px; line-height: 18px; color: var(--label-2); margin: 0; padding: 0 4px; }
.save-hint svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--link); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: spin .8s linear infinite; display: inline-block; vertical-align: -3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- floating tab bar (real functions only) ---------- */
.dock { position: fixed; z-index: 30; left: 0; right: 0; margin: 0 auto; bottom: calc(var(--s1) + var(--safe-b)); width: min(560px, calc(100% - 32px - var(--safe-l) - var(--safe-r))); display: flex; gap: 4px; align-items: center; padding: 6px; border-radius: 999px;
  transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease); }
.dock.lg { background: var(--dock-fill); }
.dock .tab { flex: 1; min-width: 64px; height: 54px; border-radius: 999px; border: 0; display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; background: transparent; color: var(--label-2); font-size: 10px; line-height: 12px; font-weight: 600; }
.dock .tab svg { width: 24px; height: 24px; }
.dock .tab[aria-current="page"] { color: var(--tint); background: var(--tint-soft); }
#dockMainLabel { display: grid; place-items: center; gap: 2px; }
.dock .tab.main.cta { flex: 2.6; font-size: 16px; line-height: 20px; font-weight: 700; }
.dock .tab.main.cta #dockMainLabel { display: inline-flex; align-items: center; gap: var(--s1); }
.dock .tab.main.cta svg { width: 22px; height: 22px; }
.dock .tab.main.cta[disabled] { color: var(--label-3); background: var(--ctl); box-shadow: none; cursor: not-allowed; }
body.kbd .dock { transform: translate3d(0, 160%, 0); opacity: 0; pointer-events: none; }

/* ---------- sheet: always in the DOM, toggled by class → interruptible; drag-to-dismiss ---------- */
.backdrop { position: fixed; inset: 0; z-index: 40; background: var(--backdrop); opacity: 0; visibility: hidden; transition: opacity var(--t-sheet) var(--ease), visibility 0s linear var(--t-sheet); }
.backdrop.open { opacity: 1; visibility: visible; transition: opacity var(--t-med) var(--ease), visibility 0s; }
.sheet { position: fixed; z-index: 41; left: 0; right: 0; margin: 0 auto; bottom: 0; width: min(760px, 100%); max-height: min(88vh, 88dvh); overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border-radius: 38px 38px 0 0; padding: 0 calc(20px + var(--safe-r)) calc(var(--s3) + var(--safe-b)) calc(20px + var(--safe-l));
  /* closed: fully below the screen — own height + home-indicator inset + room for the drop shadow and rim */
  transform: translate3d(0, calc(100% + 64px + var(--safe-b)), 0); visibility: hidden;
  transition: transform 280ms cubic-bezier(.3, .6, .4, 1), visibility 0s linear 280ms; }
.sheet.lg { background: var(--sheet-fill); }
.sheet.open { transform: translate3d(0, 0, 0); visibility: visible; transition: transform var(--t-sheet) var(--spring), visibility 0s; }
.sheet.anim { will-change: transform; }
.sheet.dragging { transition: none !important; will-change: transform; }
.sheet-handle { position: sticky; top: 0; z-index: 2; height: 28px; margin: 0 -20px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet-handle .grabber { margin: 0; }
.sheet h3 { margin: 0 0 var(--s1); font-size: 22px; line-height: 28px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px; touch-action: pan-x; }
.sheet h3 .pill-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 50%; position: relative; }
.sheet h3 .pill-btn::after { content: ""; position: absolute; inset: -4px; } /* 44pt hit area */
.sheet .seg { margin-top: var(--s2); }
.sheet .sub { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--label-2); }
.pill-btn { min-height: 44px; min-width: 44px; padding: 0 var(--s2); border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--label); background: var(--ctl); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pill-btn svg { width: 16px; height: 16px; stroke-width: 2.6; }
.entries { list-style: none; padding: 0; margin: var(--s1) 0 0; background: var(--group); border-radius: var(--r-group); overflow: hidden; }
.entries li { padding: 10px var(--s2); font-size: 15px; content-visibility: auto; contain-intrinsic-size: auto 64px; }
.entries li + li { border-top: .5px solid var(--group-sep); }
.entries .k { font-weight: 600; } .entries .s { color: var(--label-2); font-size: 13px; } .entries .v { white-space: pre-wrap; word-break: break-word; margin-top: 2px; max-height: 9em; overflow: auto; color: var(--label); }
.sheet p { font-size: 15px; color: var(--label); }
/* toast: hidden state is also visibility:hidden so no empty blurred pill can linger above the tab bar */
.toast { position: fixed; z-index: 60; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); bottom: calc(84px + var(--safe-b)); transform: translate3d(0, 16px, 0); opacity: 0; visibility: hidden; padding: 12px var(--s2); border-radius: 999px; font-size: 15px; font-weight: 600; text-align: center; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--spring), visibility 0s linear var(--t-med); }
.toast.lg { background: var(--toast-fill); }
.toast.show { opacity: 1; transform: translate3d(0, 0, 0); visibility: visible; transition: opacity var(--t-fast) var(--ease), transform var(--t-med) var(--spring), visibility 0s; }
.toast:empty { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- accessibility / capability fallbacks ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (prefers-reduced-transparency: reduce) {
  .blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .lg, .sheet.lg, .dock.lg, .toast.lg, .glass-btn, .seg.floating { background: var(--solid) !important; }
  .bg { background: var(--bg-base) !important; } }
body.solid .blur { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.solid .sheet.lg, body.solid .dock.lg, body.solid .toast.lg { background: var(--solid); }
@media (prefers-contrast: more) {
  :root { --label-2: #26222f; --label-3: #332e3e; --group-sep: rgba(0, 0, 0, .4); --link: #3f2a80; --tint: #3f2a80; --cta-ink: #1a1424; }
  :root[data-theme="dark"] { --label-2: #e8e5f0; --label-3: #d3cfe0; --group-sep: rgba(255, 255, 255, .45); --link: #e2d9ff; --tint: #e2d9ff; --cta-ink: #fff; }
  .lg, .group, .entries, .glass-btn, .seg.floating { background: #fff !important; box-shadow: 0 0 0 1.5px #332e3e !important; } .lg::before { display: none; }
  [data-theme="dark"] .lg, [data-theme="dark"] .group, [data-theme="dark"] .entries, [data-theme="dark"] .glass-btn, [data-theme="dark"] .seg.floating { background: #121019 !important; box-shadow: 0 0 0 1.5px #d3cfe0 !important; }
  .capsule.tinted, .dock .tab.main.cta:not([disabled]) { box-shadow: 0 0 0 1.5px currentColor !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sheet.lg, .dock.lg, .toast.lg { background: var(--solid); } }
@media (min-width: 900px) { .topbar, .screen { padding-left: 32px; padding-right: 32px; } }
/* header crescent: darker silver on the light pearl background so the mark stays visible */
#moonG stop:nth-child(1) { stop-color: #d9d7e3; } #moonG stop:nth-child(2) { stop-color: #9896ab; } #moonG stop:nth-child(3) { stop-color: #6c697f; }
[data-theme="dark"] #moonG stop:nth-child(1) { stop-color: #f4f3fa; } [data-theme="dark"] #moonG stop:nth-child(2) { stop-color: #c6c4d4; } [data-theme="dark"] #moonG stop:nth-child(3) { stop-color: #9491a8; }

/* ---------- ホーム画面に追加する方法 (illustrated guide) ---------- */
.row .row-sub { display: block; font-size: 13px; line-height: 18px; color: var(--label-2); }
.a2hs-rowlist { margin-top: 0; }
.sheet h3 .back-btn { order: -1; flex: none; }
.sheet h3 .back-btn + span { flex: 1; }
.a2hs-steps { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 12px; }
.a2hs-step { display: grid; grid-template-columns: 32px 1fr; grid-template-areas: "num txt" "fig fig"; gap: 8px 12px; align-items: start; padding: var(--s2); }
.a2hs-num { grid-area: num; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: var(--cta-ink); background: var(--cta-fill); box-shadow: inset 0 1px 0 var(--cta-rim), 0 4px 10px -6px var(--cta-glow); }
.a2hs-txt { grid-area: txt; } .a2hs-txt p { margin: 3px 0 0; font-size: 17px; line-height: 22px; }
.a2hs-fig { grid-area: fig; border-radius: 14px; overflow: hidden; background: radial-gradient(70% 90% at 20% 20%, rgba(226, 212, 252, .55), transparent 70%), radial-gradient(60% 90% at 85% 80%, rgba(252, 220, 234, .45), transparent 70%), rgba(255, 255, 255, .35); }
[data-theme="dark"] .a2hs-fig { background: radial-gradient(70% 90% at 20% 20%, rgba(120, 92, 220, .22), transparent 70%), radial-gradient(60% 90% at 85% 80%, rgba(200, 110, 170, .12), transparent 70%), rgba(255, 255, 255, .03); }
.a2hs-art { width: 100%; height: auto; max-height: 190px; }
.a2hs-art .a-phone { fill: rgba(255, 255, 255, .55); stroke: rgba(120, 100, 160, .28); stroke-width: 1.5; }
.a2hs-art .a-screen { fill: #faf8fc; }
.a2hs-art .a-card, .a2hs-art .a-row { fill: #fff; stroke: rgba(120, 100, 160, .14); }
.a2hs-art .a-sheet { fill: #f1edf6; }
.a2hs-art .a-bar { fill: rgba(255, 255, 255, .9); stroke: rgba(120, 100, 160, .2); }
.a2hs-art .a-row.hi { fill: #fff; stroke: var(--tint); stroke-width: 2; }
.a2hs-art .a-line { fill: rgba(90, 80, 110, .18); }
.a2hs-art .a-t { font-family: var(--font); font-weight: 600; fill: var(--label-2); letter-spacing: 0; }
.a2hs-art .a-t.strong { fill: var(--label); font-weight: 700; } .a2hs-art .a-t.tint { fill: var(--tint); }
.a2hs-art .a-glyph { fill: none; stroke: var(--tint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.a2hs-art .a-glyph circle { fill: var(--label-2); stroke: none; }
.a2hs-art .a-safari { fill: none; stroke: var(--tint); stroke-width: 1.8; } .a2hs-art .a-needle { fill: var(--tint); }
.a2hs-art .a-moon { fill: #a9a7b8; }
.a2hs-art .a-ring { fill: none; stroke: var(--tint); stroke-width: 2.5; opacity: .9; }
.a2hs-art .a-ring.soft { stroke-dasharray: 3 3; opacity: .7; }
.a2hs-art .a-icon { clip-path: inset(0 round 8px); }
[data-theme="dark"] .a2hs-art .a-phone { fill: rgba(255, 255, 255, .06); stroke: rgba(220, 210, 255, .25); }
[data-theme="dark"] .a2hs-art .a-screen { fill: #17152a; }
[data-theme="dark"] .a2hs-art .a-card, [data-theme="dark"] .a2hs-art .a-row, [data-theme="dark"] .a2hs-art .a-row.hi { fill: #26233c; stroke: rgba(220, 210, 255, .14); }
[data-theme="dark"] .a2hs-art .a-row.hi { stroke: var(--tint); }
[data-theme="dark"] .a2hs-art .a-sheet { fill: #1f1c33; } [data-theme="dark"] .a2hs-art .a-bar { fill: #2a2742; stroke: rgba(220, 210, 255, .2); }
[data-theme="dark"] .a2hs-art .a-line { fill: rgba(220, 210, 255, .18); } [data-theme="dark"] .a2hs-art .a-moon { fill: #c6c4d4; }
.a2hs-note { margin-top: var(--s2); background: var(--tint-soft); } .a2hs-note p { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--label); }
.a2hs-other { font-size: 15px; color: var(--label-2); }
.a2hs-done { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s2); } .a2hs-done strong { font-size: 17px; } .a2hs-done .hint { margin-top: 4px; }
/* one-time home tip */
.a2hs-hint { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico txt x" "ico btn x"; align-items: center; gap: 0 12px; margin-top: var(--s2); padding: 12px 8px 8px var(--s2); border-radius: 20px; }
.a2hs-hint-ico { grid-area: ico; color: var(--tint); } .a2hs-hint-ico svg { width: 24px; height: 24px; }
.a2hs-hint p { grid-area: txt; margin: 0; font-size: 15px; line-height: 20px; }
.a2hs-hint .link { grid-area: btn; justify-self: start; min-height: 44px; padding: 0; font-size: 15px; }
.a2hs-hint .hint-x { grid-area: x; width: 44px; height: 44px; padding: 0; background: transparent; color: var(--label-2); }
/* the sheet scrolls, so its rim must not be an absolutely positioned layer (it would scroll away and leave an edge line) */
.sheet.lg::before { display: none; }
.sheet.lg { box-shadow: inset 0 1px 0 var(--glass-inner-hi), inset 1px 0 0 var(--rim-soft), inset -1px 0 0 var(--rim-soft), var(--glass-drop); }

/* ---------- Languages (ja / en / ko / zh-Hans / zh-Hant). System fonts only, no font downloads. ---------- */
:root:lang(ko), [lang="ko"] { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", system-ui, sans-serif; }
:root:lang(zh-Hans), [lang="zh-Hans"] { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif; }
:root:lang(zh-Hant), [lang="zh-Hant"] { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", system-ui, sans-serif; }
[lang="ja"] { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif; }
body [lang] { font-family: var(--font); } /* endonyms in the picker render with their own script's font */
:root:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; } /* Korean wraps between words */
#langShort { font-size: 17px; font-weight: 600; line-height: 1; }
.lang-list { margin-top: var(--s1); }
.lang-list li + li::before { left: var(--s2); }
.lang-opt { min-height: 50px; }
.lang-opt .lang-check { flex: none; display: grid; width: 22px; color: var(--tint); visibility: hidden; }
.lang-opt .lang-check svg { width: 20px; height: 20px; }
.lang-opt[aria-checked="true"] .lang-check { visibility: visible; }
.lang-opt[aria-checked="true"] .name { font-weight: 600; }
.lang-opt:focus-visible, #langRow:focus-visible { outline: 2px solid var(--tint); outline-offset: -2px; border-radius: var(--r-group); }
.row .row-val { flex: none; max-width: 45%; font-size: 17px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-rowlist { margin-top: var(--s2); }

/* ======================================================================================================
   Large screens (same URL, responsive). Below 768px nothing here applies, so the iPhone layout is unchanged.
   ≥768px: wider centered column, sheets become centered dialogs.  ≥1000px: two-pane editor.
   ====================================================================================================== */
.pane-left, .drop-hint { display: none; }
.drop-zone { display: none; }
body.desktop .drop-hint { display: flex; gap: var(--s1); align-items: flex-start; margin: 12px 4px 0; font-size: 13px; line-height: 18px; color: var(--label-2); }
body.desktop .drop-hint svg { flex: none; width: 18px; height: 18px; color: var(--moon-3); }
body.desktop .ios-only { display: none; }

/* drop target: a full-window glass overlay while a file is dragged over the page */
body.dropping .drop-zone { display: grid; place-items: center; position: fixed; inset: 0; z-index: 70; padding: 24px; background: color-mix(in srgb, var(--bg-base) 55%, transparent); pointer-events: none; animation: rise var(--t-fast) var(--ease) both; }
.drop-card { display: grid; justify-items: center; gap: 10px; width: min(560px, 100%); padding: 48px 32px; border-radius: 34px; text-align: center; background: var(--sheet-fill); outline: 2.5px dashed color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: -14px; }
.drop-card strong { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--label); }
.drop-card > span:last-child { font-size: 15px; color: var(--label-2); }
.drop-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: var(--tint); background: var(--glass-fill); box-shadow: inset 0 1px 0 var(--glass-inner-hi), inset 0 0 0 1px var(--rim-soft), 0 10px 24px -12px rgba(40, 20, 80, .35); }
.drop-ico svg { width: 34px; height: 34px; }

/* focus rings stay visible inside clipped groups (inset instead of outset) */
.group .row:focus-visible, .rows .row:focus-visible, .entries :focus-visible, details.more summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: -3px; border-radius: inherit; }

/* hover feedback only for a real hovering pointer (mouse / trackpad) */
@media (hover: hover) and (pointer: fine) {
  .row:hover:not([disabled]) { background: color-mix(in srgb, var(--label) 5%, transparent); }
  .pill-btn:hover:not([disabled]), .seg button:hover:not([disabled]):not([aria-pressed="true"]) { background: color-mix(in srgb, var(--label) 9%, var(--ctl)); }
  .circle-btn:hover, .feat:hover .circle { filter: brightness(1.04); box-shadow: inset 0 1px 0 var(--glass-inner-hi), inset 0 0 0 1px var(--rim-b), 0 8px 18px -10px rgba(40, 20, 80, .4); }
  .capsule.tinted:hover:not([disabled]) { filter: brightness(1.03) saturate(1.06); }
  .capsule.plain:hover:not([disabled]) { background: color-mix(in srgb, var(--label) 9%, var(--ctl)); }
  .dock .tab:hover:not([disabled]):not([aria-current="page"]):not(.cta) { background: color-mix(in srgb, var(--label) 6%, transparent); color: var(--label); }
  .dock .tab.main.cta:hover:not([disabled]) { filter: brightness(1.03) saturate(1.06); }
  .link:hover, details.more summary:hover { text-decoration: underline; text-underline-offset: 3px; }
  .empty-card { transition: box-shadow var(--t-fast) var(--ease); }
}

@media (min-width: 768px) {
  body { --page-w: 760px; }
  .topbar, .screen { max-width: var(--page-w); }
  #home { --page-w: 720px; }
  body:not(.in-editor) .topbar { max-width: 720px; }
  body.in-editor .topbar, #editor { max-width: 900px; }
  .placeholder { height: 260px; }
  /* sheets → centered dialogs (no bottom-sheet geometry). Drag-dismiss stays for touch/pen only (main.js). */
  .sheet { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: min(620px, calc(100% - 48px)); height: -webkit-fit-content; height: fit-content; max-height: min(84vh, 84dvh, 900px);
    border-radius: 30px; padding: 0 28px 28px; opacity: 0;
    transform: translate3d(0, 28px, 0) scale(.97);
    transition: transform 220ms cubic-bezier(.3, .6, .4, 1), opacity 180ms var(--ease), visibility 0s linear 220ms; }
  .sheet.open { opacity: 1; transform: translate3d(0, 0, 0); transition: transform var(--t-sheet) var(--spring), opacity var(--t-fast) var(--ease), visibility 0s; }
  .sheet.dragging { opacity: 1; }
  .sheet-handle { margin: 0 -28px; height: 24px; }
  .toast { bottom: calc(96px + var(--safe-b)); }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .sheet-handle { cursor: default; } .sheet-handle .grabber { visibility: hidden; }
}

@media (min-width: 1000px) {
  body.in-editor .topbar, #editor { max-width: 1280px; }
  #editor:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(400px, 1fr); gap: 24px; align-items: start; }
  .pane-left { display: block; position: sticky; top: 12px; max-height: calc(100vh - 160px - var(--safe-b)); max-height: calc(100dvh - 160px - var(--safe-b)); overflow: auto; overscroll-behavior: contain; border-radius: 28px; scrollbar-width: thin; }
  .pane-left .preview { padding: 0; }
  .pane-left .preview { --frame-max-h: 46vh; --frame-max-h: min(46dvh, 720px); }
  .out-sheet { margin-top: var(--s2); }
  .out-sheet:empty { display: none; }
  #workSheet { margin-top: 0; }
  #home { --page-w: 760px; }
  body:not(.in-editor) .topbar { max-width: 760px; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: reduce) { .pane-left { scroll-behavior: auto; } }

/* ---------------- VRChat (info section, サイズ row, VRChat用 sheet) ---------------- */
:root { --crop-max-h: min(46vh, 420px); }
.vrc-logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.vrc-logo img { height: 22px; width: auto; display: block; }
.vrc-logo .lg-dark { display: none; }
[data-theme="dark"] .vrc-logo .lg-light { display: none; } [data-theme="dark"] .vrc-logo .lg-dark { display: block; }
.vrc-logo.text { line-height: 1; font-weight: 800; letter-spacing: .01em; font-size: 15px; color: var(--label); }
.vrc-card { padding: var(--s2); }
.vrc-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--label-2); }
.vrc-eyebrow .vrc-logo img { height: 24px; }
.vrc-dot { color: var(--label-3); }
.vrc-title { margin: 8px 0 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--label); overflow-wrap: anywhere; }
.vrc-title.muted { font-size: 19px; line-height: 25px; color: var(--label-2); }
.vrc-empty { margin-top: 6px; }
.vrc-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.vrc-actions .vrc-open { width: auto; flex: 1; min-height: 46px; font-size: 16px; text-decoration: none; gap: 8px; }
.vrc-actions .vrc-open svg { width: 18px; height: 18px; }
.vrc-actions .vrc-more { width: 46px; height: 46px; padding: 0; border-radius: 50%; flex: none; }
.vrc-actions .vrc-more svg { width: 20px; height: 20px; }
.vrc-rows { margin-top: var(--s1); }
.row.static { cursor: default; } .row.static:active { background: transparent; }
.row .row-val2 { flex: none; max-width: 58%; display: grid; justify-items: end; text-align: right; }
.row .row-val2 .v1 { font-size: 17px; line-height: 22px; color: var(--label-2); overflow-wrap: anywhere; }
.row .row-val2 .v2 { font-size: 12px; line-height: 16px; color: var(--label-3); }
.vrc-warn { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.vrc-warn svg { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--warn); }
.vrc-cta { margin-top: var(--s2); gap: 10px; }
.vrc-cta .vrc-logo img { height: 26px; }
.vrc-legal { margin-top: 8px; text-align: center; color: var(--label-3); }
.vrc-rowlist { margin-bottom: var(--s1); }
.vrc-row .name > span:first-child { font-weight: 600; }
.gicon.vrc-gicon { width: 44px; background: var(--ctl); box-shadow: none; border-radius: 9px; }
.gicon.vrc-gicon .vrc-logo img { height: 22px; }
.vrc-rowlist li + li::before { left: 72px; }
.row[disabled] { opacity: .5; cursor: not-allowed; }
.vrc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vrc-tag { padding: 4px 10px; border-radius: 999px; background: var(--ctl); font-size: 13px; font-weight: 600; color: var(--label-2); }
.vrc-people { max-height: 46vh; overflow: auto; }
.entries .mono, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
.vrc-urlfield { margin-top: var(--s2); font-size: 16px; }
.vrc-sheet .seg { margin-top: 0; }
.vrc-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.vrc-chip { min-height: 38px; padding: 0 4px; border: 0; border-radius: 999px; background: var(--ctl); color: var(--label); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.vrc-chip[aria-pressed="true"] { background: var(--ctl-on); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--tint), 0 3px 8px -2px rgba(40, 20, 80, .16); }
.vrc-crop, .vrc-thumb { position: relative; margin: var(--s2) auto 0; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--ctl); touch-action: none; user-select: none; -webkit-user-select: none; }
.vrc-thumb { touch-action: auto; }
.vrc-crop img, .vrc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; }
.crop-rect { position: absolute; box-sizing: border-box; border: 2px solid #fff; border-radius: 4px; box-shadow: 0 0 0 9999px rgba(10, 8, 24, .55), 0 0 0 .5px rgba(0, 0, 0, .4); cursor: move; touch-action: none; outline: none; }
.crop-rect::before, .crop-rect::after { content: ""; position: absolute; pointer-events: none; border: 0 solid rgba(255, 255, 255, .55); }
.crop-rect::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-left-width: 1px; border-right-width: 1px; }
.crop-rect::after { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-top-width: 1px; border-bottom-width: 1px; }
.crop-rect:focus-visible { border-color: var(--tint); }
.crop-h { position: absolute; width: 28px; height: 28px; z-index: 1; }
.crop-h::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid #fff; }
.crop-h[data-c="nw"] { left: -8px; top: -8px; cursor: nwse-resize; } .crop-h[data-c="nw"]::after { left: 6px; top: 6px; border-left-width: 4px; border-top-width: 4px; }
.crop-h[data-c="ne"] { right: -8px; top: -8px; cursor: nesw-resize; } .crop-h[data-c="ne"]::after { right: 6px; top: 6px; border-right-width: 4px; border-top-width: 4px; }
.crop-h[data-c="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; } .crop-h[data-c="sw"]::after { left: 6px; bottom: 6px; border-left-width: 4px; border-bottom-width: 4px; }
.crop-h[data-c="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; } .crop-h[data-c="se"]::after { right: 6px; bottom: 6px; border-right-width: 4px; border-bottom-width: 4px; }
.vrc-out { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.vrc-swgroup { margin-top: var(--s2); }
.vrc-switch { display: flex; align-items: center; gap: 12px; padding: 12px var(--s2); cursor: pointer; position: relative; }
.vrc-switch .name { flex: 1; min-width: 0; font-size: 17px; line-height: 22px; }
.vrc-switch .row-sub { display: block; font-size: 13px; line-height: 18px; color: var(--label-2); }
.vrc-switch input { position: absolute; opacity: 0; width: 51px; height: 31px; right: var(--s2); margin: 0; cursor: pointer; }
.vrc-switch .knob { flex: none; width: 51px; height: 31px; border-radius: 999px; background: color-mix(in srgb, var(--label) 18%, transparent); position: relative; transition: background var(--t-fast, .2s); pointer-events: none; }
.vrc-switch .knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); transition: transform var(--t-fast, .2s); }
.vrc-switch input:checked + .knob { background: #34c759; } .vrc-switch input:checked + .knob::after { transform: translateX(20px); }
.vrc-switch input:focus-visible + .knob { outline: 3px solid color-mix(in srgb, var(--tint) 70%, transparent); outline-offset: 2px; }
.vrc-sheet #vrcExportBtn, .vrc-done-acts { margin-top: var(--s2); }
.vrc-done-acts { display: grid; gap: 10px; }
.vrc-done-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .vrc-done-row.one { grid-template-columns: 1fr; }
.vrc-copy-status { display: flex; align-items: flex-start; gap: 8px; margin: 10px 2px 0; font-size: 15px; font-weight: 600; color: var(--label); }
.vrc-copy-status svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.vrc-copy-status.pass svg { color: var(--ok, #34c759); } .vrc-copy-status.warn svg { color: var(--warn, #ff9f0a); } .vrc-copy-status.fail svg { color: var(--ng, #ff453a); }
.vrc-copy-note { margin: 6px 2px 0; }
.vrc-foot { margin-top: 12px; }
.vrc-checks { margin-top: var(--s2); }
.vrc-fname { text-align: center; margin-top: 10px; }
.vrc-back { display: block; margin: 12px auto 0; min-height: 44px; }
.vrc-sheet .result-head { margin-bottom: 0; }
.vrc-tips li { line-height: 21px; }
@media (prefers-reduced-motion: reduce) { .vrc-switch .knob, .vrc-switch .knob::after { transition: none; } }
.vrc-legal, .vrc-warn span, .vrc-empty { text-wrap: pretty; }
.vrc-eyebrow .vrc-logo img { height: 30px; }
.vrc-cta .vrc-logo img { height: 32px; }
.row .row-val2 { max-width: 62%; }

/* Which image's info is shown below (text + icon, not colour only) */
.info-src { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px auto 0; font-size: 13px; font-weight: 600; color: var(--label-2); }
.info-src svg { width: 15px; height: 15px; flex: none; }
.info-src[data-src="proc"] { color: var(--link); }
.proc-note { margin: 0 0 var(--s1); }

/* What would be kept + one-tap 全部消す (calm, informational) */
.keep-box { display: grid; gap: 10px; margin: 0 0 12px; } .keep-box[hidden] { display: none; }
.keep-list { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 16px; background: var(--ctl); }
.keep-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--label); }
.keep-list svg { width: 20px; height: 20px; flex: none; color: var(--label-2); margin-top: 1px; }
.keep-btn { min-height: 48px; }

/* VRChat card header: globe + ワールド as a small calm label chip */
.vrc-world-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--ctl); color: var(--label-2); font-size: 13px; font-weight: 600; line-height: 1; }
.vrc-world-chip svg { width: 15px; height: 15px; flex: none; }

/* QR card (calm; content shown as text, domain emphasised) */
.qr-sec[hidden] { display: none; }
.qr-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--label); }
.qr-head > svg { width: 20px; height: 20px; flex: none; color: var(--label-2); }
.qr-title { flex: 1; min-width: 0; }
.qr-quiet { display: flex; align-items: center; gap: 8px; margin: 2px 4px; font-size: 13px; color: var(--label-3); }
.qr-quiet svg { width: 15px; height: 15px; flex: none; } .qr-quiet .spinner { width: 13px; height: 13px; border-width: 2px; }
.qr-sec > .qr-head { margin: 0 4px 4px; font-size: 13px; color: var(--label-2); } .qr-sec > .qr-head > svg { width: 16px; height: 16px; }
.qr-card { padding: 14px var(--s2); display: grid; gap: 12px; }
.qr-item { display: grid; gap: 8px; padding-top: 12px; border-top: .5px solid var(--group-sep); }
.qr-domain { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; font-weight: 600; color: var(--label); }
.qr-domain svg { width: 16px; height: 16px; flex: none; color: var(--label-2); }
.qr-url, .qr-text { margin: 0; font-size: 14px; line-height: 20px; word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 10em; overflow: auto; color: var(--label-2); }
.qr-url .qr-host { color: var(--label); font-weight: 700; background: color-mix(in srgb, var(--tint) 16%, transparent); border-radius: 4px; padding: 0 2px; }
.qr-warn { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; color: var(--label-2); } .qr-warn svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.qr-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .qr-acts > :only-child { grid-column: 1 / -1; }
.qr-acts .capsule { min-height: 44px; font-size: 15px; }
.qr-note { margin: 0; }
.qr-open { text-decoration: none; color: var(--link); }
.qr-status { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; color: var(--label); }
.qr-status svg { width: 16px; height: 16px; flex: none; } .qr-status.pass svg { color: #34c759; } .qr-status.warn svg { color: #ff9f0a; }
.qr-url, .qr-text { -webkit-user-select: text; user-select: text; }
/* Saved-file summary: 削除した / 残っている (from re-reading the output) */
#saveSummary[hidden], .vrc-sum[hidden] { display: none; }
.sum { display: grid; gap: 6px; margin-top: 14px; }
.sum-title { margin: 0 4px; font-size: 15px; font-weight: 700; color: var(--label); }
.sum-h { display: flex; align-items: center; gap: 6px; margin: 6px 4px 0; font-size: 13px; font-weight: 600; color: var(--label-2); }
.sum-h svg { width: 15px; height: 15px; }
.sum-list { list-style: none; margin: 0; padding: 0; }
.sum-list li { display: flex; align-items: center; gap: 10px; padding: 10px var(--s2); font-size: 15px; color: var(--label); }
.sum-list li + li { border-top: .5px solid var(--group-sep); }
.sum-list svg { width: 18px; height: 18px; flex: none; } .sum-list.rm svg { color: var(--label-2); } .sum-list.kp svg { color: #34c759; }
.sum-note { margin: 2px 4px 0; }

/* ---- 安全性と透明性 page ---- */
.sf { display: grid; gap: 12px; padding-bottom: 8px; }
.sf p { margin: 0; overflow-wrap: anywhere; }
.sf-lead { color: var(--label-2); }
.sf-fig { border-radius: 22px; padding: 10px 6px; background: rgba(255, 255, 255, .45); border: 1px solid rgba(120, 100, 160, .14); }
.sf-art { display: block; width: 100%; height: auto; max-height: 170px; }
.sf-art .s-phone { fill: rgba(255, 255, 255, .6); stroke: rgba(120, 100, 160, .3); stroke-width: 1.5; }
.sf-art .s-screen { fill: #faf8fc; }
.sf-art .s-photo { fill: #cfe3f0; } .sf-art .s-hill { fill: #8fb9a8; } .sf-art .s-sun { fill: #f2c879; }
.sf-art .s-lock { fill: none; stroke: var(--tint); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sf-art .s-arrow, .sf-art .s-arrow-h { fill: none; stroke: #a9a7b8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sf-art .s-arrow { stroke-dasharray: 6 7; }
.sf-art .s-x-bg { fill: #fff; stroke: #d0605a; stroke-width: 2.5; } .sf-art .s-x { stroke: #d0605a; stroke-width: 3; stroke-linecap: round; }
.sf-art .s-globe { fill: rgba(255, 255, 255, .6); stroke: #a9a7b8; stroke-width: 2; } .sf-art .s-globe-l { fill: none; stroke: #a9a7b8; stroke-width: 1.6; }
[data-theme="dark"] .sf-fig { background: rgba(255, 255, 255, .05); border-color: rgba(220, 210, 255, .12); }
[data-theme="dark"] .sf-art .s-phone { fill: rgba(255, 255, 255, .06); stroke: rgba(220, 210, 255, .25); }
[data-theme="dark"] .sf-art .s-screen { fill: #17152a; } [data-theme="dark"] .sf-art .s-photo { fill: #2c3f55; } [data-theme="dark"] .sf-art .s-hill { fill: #4f7f6f; }
[data-theme="dark"] .sf-art .s-x-bg { fill: #26233c; stroke: #e57f78; } [data-theme="dark"] .sf-art .s-x { stroke: #e57f78; }
[data-theme="dark"] .sf-art .s-globe { fill: rgba(255, 255, 255, .06); stroke: #77748c; } [data-theme="dark"] .sf-art .s-globe-l, [data-theme="dark"] .sf-art .s-arrow, [data-theme="dark"] .sf-art .s-arrow-h { stroke: #77748c; }
.sf-sec { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(120, 100, 160, .12); }
[data-theme="dark"] .sf-sec { background: rgba(255, 255, 255, .05); border-color: rgba(220, 210, 255, .1); }
.sf-sec h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: var(--label); }
.sf-ico { display: inline-flex; width: 20px; height: 20px; color: var(--tint); flex: none; } .sf-ico svg { width: 100%; height: 100%; }
.sf-list { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; overflow-wrap: anywhere; }
.sf-scores { margin: 0; } .sf-score { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; min-height: 0; }
.sf-score .row-val.pending { color: var(--label-2); }
.sf-date { text-align: center; }

/* ---- update banner (service worker) ---- */
.sw-banner { position: fixed; z-index: 70; left: 0; right: 0; margin: 0 auto; bottom: calc(92px + var(--safe-b)); width: max-content; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; color: var(--label);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); animation: swIn .5s cubic-bezier(.2, .8, .2, 1) both; cursor: pointer; }
.sw-banner { background: var(--glass-fill-strong, rgba(255,255,255,.82)); } [data-theme="dark"] .sw-banner { background: rgba(40, 36, 60, .82); }
.sw-ico { display: inline-flex; width: 18px; height: 18px; color: var(--tint); } .sw-ico svg { width: 100%; height: 100%; }
@keyframes swIn { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sw-banner { animation: none; } }
.notice.heic-no { display: flex; gap: 8px; align-items: flex-start; } .notice.heic-no svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--tint); }
.sum-status { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; font-weight: 600; }
.sum-status svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sum-status.good { background: rgba(90, 160, 130, .14); color: var(--label); } .sum-status.good svg { color: #3f8f6e; }
.sum-status.bad { background: rgba(214, 120, 70, .16); color: var(--label); } .sum-status.bad svg { color: #c46a2e; }
.sum-list.bad li svg { color: #c46a2e; } .sum-list.ch li svg { color: var(--tint); }

/* ---- experimental video ---- */
.vid { display: grid; gap: 10px; }
.vid-exp { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(120, 100, 200, .1); font-size: 14px; }
.vid-exp svg { width: 18px; height: 18px; flex: none; color: var(--tint); }
.vid-pv { width: 100%; max-height: 46svh; border-radius: 16px; background: #000; display: block; }
.vid-info .kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; } .vid-info .row-val { text-align: right; overflow-wrap: anywhere; }
.vid-groups { display: grid; gap: 8px; }
.vid-g { padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(120, 100, 160, .12); }
[data-theme="dark"] .vid-g { background: rgba(255, 255, 255, .05); border-color: rgba(220, 210, 255, .1); }
.vid-gh { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.vid-gh .seg { flex: none; }
.vid-items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.vid-items li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .vid-items .k { color: var(--label-2); overflow-wrap: anywhere; } .vid-items .v { overflow-wrap: anywhere; }
.vid-edit { display: grid; gap: 8px; } .vid-edit .field { display: grid; gap: 4px; } .vid-edit input { font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(120, 100, 160, .25); background: var(--glass-fill, #fff); color: var(--label); min-width: 0; }
#vidSave { width: 100%; }

/* ================= 2026-10-20 (b): task switch, iOS-like motion, larger VRChat logo, settings groups ================= */
:root { --ios-ease: cubic-bezier(.32, .72, 0, 1); --t-sheet-in: 540ms; --t-sheet-out: 380ms; --t-screen: 480ms; }
/* Home task buttons: label + short purpose line; each opens the picker and then that task */
.feat .fs { font-size: 11px; line-height: 14px; color: var(--label-3); text-align: center; margin-top: -4px; }
/* One task at a time in the editor: 情報｜形式｜サイズ (changes / verification / save are shared and always shown) */
.task-seg { position: relative; width: min(360px, 100%); margin: 0 auto var(--s1); padding: 4px; border-radius: 999px; background: var(--glass-fill); }
.task-seg button { position: relative; z-index: 1; min-height: 40px; border-radius: 999px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.task-seg button svg { width: 17px; height: 17px; flex: none; }
.task-seg button[aria-pressed="true"] { background: transparent; box-shadow: none; color: var(--tint); }
.task-seg .seg-pill { width: calc((100% - 12px) / 3); border-radius: 999px; transition: translate 520ms var(--spring), scale 200ms var(--spring); }
#editor[data-task="format"] .task-seg .seg-pill { translate: calc(100% + 2px) 0; }
#editor[data-task="size"] .task-seg .seg-pill { translate: calc(200% + 4px) 0; }
#editor[data-task="info"] [data-task-of]:not([data-task-of~="info"]),
#editor[data-task="format"] [data-task-of]:not([data-task-of~="format"]),
#editor[data-task="size"] [data-task-of]:not([data-task-of~="size"]) { display: none !important; }
@media (min-width: 1000px) {
  .task-seg { grid-column: 2; grid-row: 1; margin: 0 0 0 auto; width: 100%; }
  #editor:not([hidden]) > .pane-left { grid-column: 1; grid-row: 1 / span 2; }
  #editor:not([hidden]) > #workSheet { grid-column: 2; grid-row: 2; }
}
/* Sheets: slower iOS sheet curve, dim + light blur behind that fade in gradually (only opacity animates) */
.backdrop { -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
  transition: opacity var(--t-sheet-out) var(--ios-ease), visibility 0s linear var(--t-sheet-out); }
.backdrop.open { transition: opacity var(--t-sheet-in) var(--ios-ease), visibility 0s; }
.sheet { transition: transform var(--t-sheet-out) var(--ios-ease), visibility 0s linear var(--t-sheet-out); }
.sheet.open { transition: transform var(--t-sheet-in) var(--ios-ease), visibility 0s; }
@media (min-width: 768px) {
  .sheet { transition: transform var(--t-sheet-out) var(--ios-ease), opacity 240ms var(--ease), visibility 0s linear var(--t-sheet-out); }
  .sheet.open { transition: transform var(--t-sheet-in) var(--ios-ease), opacity 260ms var(--ease), visibility 0s; }
}
#sheetBody { will-change: auto; }
/* Screen push / pop (View Transitions + fallback): full-width slide like iOS navigation, old page moves 30% and dims */
::view-transition-group(hf-screen) { animation-duration: var(--t-screen); animation-timing-function: var(--ios-ease); }
::view-transition-old(hf-screen) { animation: vt-out var(--t-screen) var(--ios-ease) both; }
::view-transition-new(hf-screen) { animation: vt-in var(--t-screen) var(--ios-ease) both; }
:root.vt-back::view-transition-old(hf-screen) { animation-name: vt-out-back; }
:root.vt-back::view-transition-new(hf-screen) { animation-name: vt-in-back; }
@keyframes vt-in { from { transform: translate3d(100%, 0, 0); } }
@keyframes vt-out { to { transform: translate3d(-30%, 0, 0); opacity: .35; } }
@keyframes vt-in-back { from { transform: translate3d(-30%, 0, 0); opacity: .35; } }
@keyframes vt-out-back { to { transform: translate3d(100%, 0, 0); } }
.screen.push-in { animation: push-in var(--t-screen) var(--ios-ease) both; }
.screen.pop-in { animation: pop-in var(--t-screen) var(--ios-ease) both; }
@keyframes push-in { from { transform: translate3d(100%, 0, 0); } }
@keyframes pop-in { from { transform: translate3d(-30%, 0, 0); opacity: .35; } }
html, body { overflow-x: clip; }
#editor.edge-drag { transition: none; will-change: transform; }
#editor.edge-back { transition: transform 300ms var(--ios-ease); }
/* VRChat logo: larger, same artwork and colours (height only; width follows the aspect ratio) */
.vrc-eyebrow .vrc-logo img { height: 40px; }
.vrc-cta { min-height: 56px; }
.vrc-cta .vrc-logo img { height: 40px; }
.gicon.vrc-gicon { width: 60px; height: 34px; }
.gicon.vrc-gicon .vrc-logo img { height: 26px; }
.vrc-rowlist li + li::before { left: 88px; }
/* Settings: each heading has its own grouped list; nothing touches the list above */
.sheet .lbl + .rows.group { margin-top: 0; }
.sheet .rows.group + .lbl, .sheet .hint + .lbl, .sheet .seg + .lbl { margin-top: var(--s3); }
.sheet .rows.group.sf-rowlist { margin-top: 0; }
.sheet .rows.group + .rows.group { margin-top: var(--s2); }
@media (prefers-reduced-motion: reduce) {
  .backdrop, .backdrop.open { transition: opacity 160ms linear, visibility 0s; }
  .sheet, .sheet.open { transition: opacity 160ms linear, visibility 0s !important; }
  .task-seg .seg-pill { transition: none; }
  #editor.edge-back { transition: none; }
}