/* ============================================================
   SHINDO — Focus mode page (Build_16)
   Palette from the app's profile screens: deep green-teal, focus amber, alert teal.
   ============================================================ */
.mod--fo, .fo-home { --mc: #4FD1C5; --mc-ink: #1F8A80; --amber: #E8B34A; --night: #0E1416; }

/* ---------- 1 · Hero — dial + lock screen ---------- */
.fo-hero { position: relative; min-height: 100svh; overflow: hidden; color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(24px, 4vw, 72px);
  padding: calc(var(--nav-h) + 30px) clamp(24px, 4.6vw, 88px) 60px; background: radial-gradient(70% 60% at 50% 0%, #22382f 0%, #0e1416 70%); }
.fo-hero__copy { display: grid; gap: 20px; max-width: 560px; }
.fo-hero__copy .eyebrow { color: var(--mc); }
html[lang="ja"] .fo-hero__title { font-size: clamp(34px, 3.6vw, 60px) !important; line-height: 1.15 !important; }
.fo-hero__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 4.6vw, 78px); line-height: 1.02; letter-spacing: -0.04em; }
.fo-hero__lead { margin: 0; font-size: 16px; color: rgba(255,255,255,0.65); }
.fo-hero__mode { margin: 6px 0 0; display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); min-height: 110px; align-content: start; }
.fo-hero__mode b { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--mc); }
.fo-hero__mode span { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.78); }
.fo-dial { position: relative; width: clamp(300px, 29vw, 440px); aspect-ratio: 1; touch-action: none; cursor: grab; user-select: none; }
.fo-dial.is-drag { cursor: grabbing; }
.fo-dial__svg { width: 100%; height: 100%; overflow: visible; }
.d-ring { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 2; }
.d-ticks line { stroke: rgba(255,255,255,0.18); stroke-width: 1.5; }
.d-knob { transition: transform 700ms cubic-bezier(.25,1.4,.4,1); }
.fo-dial.is-drag .d-knob { transition: none; }
.d-knob > circle:first-child { fill: url(#none); fill: #1a2324; stroke: rgba(255,255,255,0.12); stroke-width: 2; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6)); }
.d-grip { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 14; stroke-dasharray: 1.5 5; }
.d-mark { stroke: var(--mc); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 8px var(--mc)); }
.d-labels text { fill: rgba(255,255,255,0.45); font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.1em; text-anchor: middle; dominant-baseline: middle; text-transform: uppercase; transition: fill 300ms; }
.d-labels text.is-on { fill: #fff; }
.d-labels path { fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 300ms; }
.d-labels g.is-on path { stroke: var(--mc); }
.fo-dial__btns { position: absolute; inset: 0; pointer-events: none; }
.fo-dial__btns button { position: absolute; width: 96px; height: 54px; margin: -27px 0 0 -48px; border: 0; background: transparent; cursor: pointer; pointer-events: auto; border-radius: 16px; }
.fo-dial__btns button:focus-visible { outline: 2px solid var(--mc); }
.fo-lock.iphone { width: clamp(220px, 17vw, 270px); }
.fo-lock__in { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; padding: 22% 6% 8%; color: #fff;
  background: radial-gradient(90% 60% at 50% 0%, #2b4a3e 0%, #0f1a1c 60%, #090c0d 100%); }
.fo-lock__date { font-size: 12px; color: rgba(255,255,255,0.75); }
.fo-lock__time { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.03em; }
.fo-lock__stack { position: relative; width: 100%; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; mask-image: linear-gradient(180deg, #000 80%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); }
.fo-note { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10.5px; line-height: 1.3; animation: foIn 420ms cubic-bezier(.2,1.3,.4,1) both; }
.fo-note i { width: 22px; height: 22px; border-radius: 6px; background: #0e1416; display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 700; color: var(--mc); }
.fo-note b { display: block; font-size: 10.5px; } .fo-note small { color: rgba(255,255,255,0.7); font-size: 10px; }
.fo-note.is-alarm { background: rgba(255,59,48,0.35); } .fo-note.is-alarm i { color: #ff6b60; }
.fo-note.is-out { animation: foOut 260ms ease-in forwards; }
@keyframes foIn { from { opacity: 0; transform: translateY(-14px) scale(0.94); } }
@keyframes foOut { to { opacity: 0; transform: translateX(40px); } }
.fo-lock__count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* ---------- 3 · Lanes (sticky) ---------- */
.fo-lanes { position: relative; height: 360vh; margin: 0 var(--inset); border-radius: var(--radius-xl); background: #0d1213; }
.fo-lanes__sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; border-radius: var(--radius-xl); color: #fff; display: grid; grid-template-rows: auto 1fr auto auto; gap: 14px;
  padding: clamp(80px, 11vh, 120px) clamp(24px, 4vw, 72px) clamp(20px, 4vh, 40px); }
.fo-lanes__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px; }
.fo-lanes__head .eyebrow { grid-column: 1 / -1; }
.fo-lanes__clock { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 4.6vw, 76px); line-height: 1; font-variant-numeric: tabular-nums; }
.fo-lanes__board { position: relative; display: grid; grid-template-rows: auto 1fr; padding-left: 170px; }
.fo-lanes__axis { position: relative; height: 22px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); }
.fo-lanes__axis span { position: absolute; transform: translateX(-50%); } .fo-lanes__axis span:nth-child(1) { left: 0; } .fo-lanes__axis span:nth-child(2) { left: 25%; } .fo-lanes__axis span:nth-child(3) { left: 50%; } .fo-lanes__axis span:nth-child(4) { left: 75%; } .fo-lanes__axis span:nth-child(5) { left: 100%; }
.fo-lanes__rows { display: grid; grid-auto-rows: 1fr; gap: 8px; }
.fo-lane { position: relative; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.fo-lane__name { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); width: 150px; display: grid; gap: 2px; text-align: right; }
.fo-lane__name b { font-family: var(--font-display); font-weight: 500; font-size: 17px; } .fo-lane__name span { font-family: var(--font-mono); font-size: 11px; color: var(--mc); }
.fo-ev { position: absolute; top: 50%; left: var(--x); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.2); transition: transform 300ms, background 300ms, border-color 300ms, box-shadow 300ms; }
.fo-ev.is-pass.is-hit { background: var(--ec); border-color: var(--ec); transform: scale(1.35); box-shadow: 0 0 18px var(--ec); }
.fo-ev.is-drop.is-hit { border-style: dashed; opacity: 0.35; }
.fo-lanes__head-line { position: absolute; top: 22px; bottom: 0; left: calc(170px + var(--ph, 0) * (100% - 170px)); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(79,209,197,0.8); }
.fo-lanes__now { margin: 0; min-height: 1.5em; font-size: 16px; color: rgba(255,255,255,0.9); }
.fo-lanes__now em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--mc); margin-right: 10px; }
.fo-lanes__fine { margin: 0; font-size: 12px; color: rgba(255,255,255,0.45); }

/* ---------- 4 · Drums ---------- */
.fo-drums { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 90px); align-items: center; padding: clamp(80px, 10vw, 150px) clamp(24px, 4.6vw, 88px); }
.fo-drums__copy { display: grid; gap: 20px; }
.fo-drums__copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.fo-drums__copy > p.fo-drums__fine { font-size: 13px; }
.fo-drums__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-xl); background: #15191b; color: #fff; }
.fo-drum { display: grid; gap: 10px; outline: none; }
.fo-drum > b { font-weight: 500; font-size: 15px; color: rgba(255,255,255,0.75); }
.fo-drum:focus-visible .fo-drum__win { box-shadow: 0 0 0 2px var(--mc); }
.fo-drum__win { position: relative; height: 210px; border-radius: 18px; background: #1d2224; perspective: 700px; overflow: hidden; cursor: ns-resize; touch-action: none; }
.fo-drum__win::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 40px; margin-top: -20px; border-radius: 12px; background: rgba(255,255,255,0.08); }
.fo-drum__win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #1d2224 0%, rgba(29,34,36,0) 30%, rgba(29,34,36,0) 70%, #1d2224 100%); }
.fo-drum__cyl { position: absolute; left: 0; right: 0; top: 50%; height: 40px; margin-top: -20px; transform-style: preserve-3d; transition: transform 420ms cubic-bezier(.2,1.2,.4,1); }
.fo-drum.is-drag .fo-drum__cyl { transition: none; }
.fo-drum__cyl span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; backface-visibility: hidden; white-space: nowrap; color: rgba(255,255,255,0.85); }
.fo-drum__cyl span em { font-style: normal; font-weight: 600; } .fo-drum__cyl span small { color: rgba(255,255,255,0.55); font-size: 12px; }
.fo-drum[data-d="0"] .fo-drum__cyl span.is-on em { color: var(--mc); } .fo-drum[data-d="1"] .fo-drum__cyl span.is-on em { color: #FF8A5C; }
.fo-drums__desc { grid-column: 1 / -1; margin: 0; min-height: 4.6em; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.fo-drums__bar { grid-column: 1 / -1; display: flex; height: 12px; border-radius: 12px; overflow: hidden; }
.fo-drums__bar i { height: 100%; transition: flex-grow 500ms cubic-bezier(.2,1,.3,1); }
.b-quiet { background: rgba(255,255,255,0.15); } .b-notify { background: var(--mc); } .b-alarm { background: #FF6A4A; }
.fo-drums__keys { grid-column: 1 / -1; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,0.6); }
.fo-drums__keys span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-q::before { background: rgba(255,255,255,0.25); } .k-n::before { background: var(--mc); } .k-a::before { background: #FF6A4A; }

/* ---------- 5 · Visiting ---------- */
.fo-visit { margin: 0 var(--inset); border-radius: var(--radius-xl); padding: clamp(70px, 8vw, 130px) clamp(24px, 4.6vw, 88px); color: #fff; background: radial-gradient(60% 60% at 80% 20%, #1f3550 0%, rgba(31,53,80,0) 70%), #0c1118; display: grid; gap: 40px; }
.fo-visit__copy { display: grid; gap: 18px; max-width: 760px; }
.fo-visit__copy p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.75); }
.fo-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; perspective: 1400px; }
.fo-card { position: relative; width: 100%; aspect-ratio: 4 / 5; border: 0; padding: 0; background: transparent; cursor: pointer; transform-style: preserve-3d; transition: transform 800ms cubic-bezier(.3,1.3,.4,1); font: inherit; color: inherit; text-align: left; }
.fo-card.is-flip { transform: rotateY(180deg); }
.fo-card__f, .fo-card__b { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 22px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fo-card__f { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
.fo-card__b { transform: rotateY(180deg); background: linear-gradient(160deg, #f4efe4, #e6dccb); color: #1b1712; }
.fo-card small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; opacity: 0.6; }
.fo-card__f b { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.2; }
.fo-card__b b { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; line-height: 1.35; }
.fo-card__b em { font-style: normal; font-size: 14px; opacity: 0.7; }

/* ---------- 6 · Orbit ---------- */
.fo-orbit { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 90px); align-items: center; padding: clamp(80px, 10vw, 150px) clamp(24px, 4.6vw, 88px); }
.fo-orbit__copy { display: grid; gap: 20px; }
.fo-orbit__copy > p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }
.fo-orbit__cap { min-height: 1.6em; font-weight: 600; color: var(--mc-ink) !important; }
.fo-orbit__stage { --R: min(38%, 220px); position: relative; aspect-ratio: 1; border-radius: var(--radius-xl); background: radial-gradient(circle at 50% 50%, #1d2b2c 0%, #0c1112 70%); overflow: hidden; }
.fo-orbit__core { position: absolute; left: 50%; top: 50%; width: 56%; transform: translate(-50%, -50%); z-index: 2; }
.fo-orbit__core img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 60px rgba(232,179,74,0.25); }
.fo-orbit__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 22% + 30%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(255,255,255,0.12); }
.fo-planet { --rot: 0deg; position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; justify-items: center; gap: 6px; text-decoration: none; color: #fff;
  transform: translate(-50%, -50%) rotate(calc(var(--a) + var(--rot))) translateY(calc(var(--o) * -17% - 22%)) rotate(calc(-1 * (var(--a) + var(--rot)))); }
.fo-orbit__stage { container-type: size; }
.fo-planet { transform: translate(-50%, -50%) rotate(calc(var(--a) + var(--rot))) translateY(calc((var(--o) * 11cqw + 15cqw) * -1)) rotate(calc(-1 * (var(--a) + var(--rot)))); }
.fo-planet span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #1d2a2b; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 250ms, background 250ms; }
.fo-planet svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fo-planet b { font-size: 12px; font-weight: 600; white-space: nowrap; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,0.45); }
.fo-planet:hover span, .fo-planet:focus-visible span { transform: scale(1.15); background: var(--mc-ink); }

/* ---------- 7 · Signal ---------- */
.fo-signal { position: relative; margin: var(--inset) var(--inset) 0; border-radius: var(--radius-xl); min-height: 90vh; overflow: hidden; display: grid; place-items: center; padding: 80px 24px; background: #0b0f10; color: #fff; }
.fo-signal__noise { position: absolute; inset: 0; }
.fo-signal__noise i { position: absolute; left: var(--x); top: var(--y); height: 18px; width: var(--w); border-radius: 9px; background: rgba(255,255,255,0.08); transform: translate(-50%, -50%) translate(calc(var(--dx) * (1 - var(--s, 0))), calc(var(--dy) * (1 - var(--s, 0)))) scale(calc(1 - var(--s, 0) * 0.6)); opacity: calc(1 - var(--s, 0)); }
.fo-signal__line { position: relative; z-index: 2; margin: 0; padding: 22px 34px; border-radius: 28px; font-family: var(--font-display); font-weight: 300; font-size: clamp(30px, 4.2vw, 68px); line-height: 1.1; letter-spacing: -0.03em; text-align: center; max-width: 18ch;
  background: rgba(79,209,197, calc(var(--s, 0) * 0.14)); border: 1px solid rgba(79,209,197, calc(var(--s, 0) * 0.5)); box-shadow: 0 0 calc(var(--s, 0) * 80px) rgba(79,209,197, calc(var(--s, 0) * 0.35)); opacity: calc(0.15 + var(--s, 0) * 0.85); transform: scale(calc(0.9 + var(--s, 0) * 0.1)); }
.fo-signal__line span + span { color: var(--mc); }

/* ---------- Homepage row ---------- */
.fo-home { position: relative; aspect-ratio: 16 / 13; width: 100%; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; background: radial-gradient(70% 60% at 50% 0%, #22382f 0%, #0e1416 70%); }
.fo-home__in { position: absolute; inset: 0; transform: rotateX(calc(var(--rx, 0deg) * 0.5)) rotateY(calc(var(--ry, 0deg) * 0.5)) scale(1.03); transition: transform 600ms var(--ease); }
.fo-home__dial { position: absolute; left: 50%; top: 44%; width: 56%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #1a2324; box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(255,255,255,0.08); }
.fo-home__dial::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 10px dotted rgba(255,255,255,0.06); }
.fo-home__dial i { position: absolute; left: 50%; top: 4%; width: 6px; height: 8%; margin-left: -3px; border-radius: 6px; background: var(--mc); box-shadow: 0 0 12px var(--mc); transform-origin: 50% 575%; animation: foHomeDial 10s cubic-bezier(.3,1.4,.4,1) infinite; }
@keyframes foHomeDial { 0%, 16% { transform: rotate(-90deg); } 20%, 36% { transform: rotate(-45deg); } 40%, 56% { transform: rotate(0deg); } 60%, 76% { transform: rotate(45deg); } 80%, 96% { transform: rotate(90deg); } 100% { transform: rotate(-90deg); } }
.fo-home__card { position: absolute; margin: 0; z-index: 2; }
.fo-home__card img { display: block; width: 100%; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08); }
.fo-home__card--focus { width: 52%; left: 4%; bottom: 25%; }
.fo-home__card--alerts { width: 56%; right: 4%; bottom: 5%; }
.fo-home__modes { position: absolute; left: 50%; top: 44%; width: 56%; z-index: 1; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; container-type: size; }
.fo-home__modes span { position: absolute; left: 50%; top: 50%; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,0.32);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-26cqw) rotate(calc(-1 * var(--a))); animation: foHomeLab 10s linear infinite; animation-delay: calc(var(--k) * 2s); }
@media (max-width: 600px) { .fo-home__modes span { animation-name: foHomeLabM; color: transparent; font-size: 10px; } }
@keyframes foHomeLabM { 0%, 18% { color: #fff; } 20%, 100% { color: transparent; } }
@keyframes foHomeLab { 0%, 18% { color: #fff; } 20%, 100% { color: rgba(255,255,255,0.32); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .fo-hero { grid-template-columns: 1fr 1fr; } .fo-hero__copy { grid-column: 1 / -1; } .fo-dial { justify-self: center; } }
@media (max-width: 900px) {
  .fo-hero { grid-template-columns: 1fr; justify-items: center; gap: 28px; }
  .fo-dial { width: min(380px, 94vw); }
  .fo-lock.iphone { width: min(240px, 64vw); }
  .fo-lanes__board { padding-left: 0; }
  .fo-lanes__head-line { left: calc(var(--ph, 0) * 100%); }
  .fo-lane__name { right: auto; left: 10px; top: 4px; transform: none; width: auto; display: flex; gap: 8px; text-align: left; }
  .fo-lane__name b { font-size: 13px; } .fo-lane__name span { font-size: 10px; }
  .fo-ev { top: 62%; }
  .fo-drums, .fo-orbit { grid-template-columns: 1fr; }
  .fo-drums__stage { grid-template-columns: 1fr; }
  .fo-drum__win { height: 170px; } .fo-drum__cyl span { font-size: 13px; }
  .fo-cards { grid-template-columns: 1fr 1fr; }
  .fo-planet span { width: 44px; height: 44px; } .fo-planet svg { width: 20px; height: 20px; } .fo-planet b { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fo-home__dial i, .fo-home__modes span { animation: none; } .fo-home__modes span { color: rgba(255,255,255,0.45); } }