@charset "UTF-8";
/* Hinokoto Timer page. Tokens live in style.css. */

.timer-intro { padding-block: 24px 0; }
.timer-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--content-gap); }
.timer-hero-copy { display: grid; justify-items: start; gap: 16px; }
.timer-hero-copy h1 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.15; letter-spacing: -.05em; }
.timer-lead { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.8; color: var(--on-surface-variant); }
.timer-availability { font: 600 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--outline); }

/* Hero: the app's glowing ring on ink, as in the timer_app store artwork (2026-10-07).
   The arc runs FocusPalette.work (lifted 28% toward white) from 12 o'clock to the "now" tip at 86%.
   Radii are % of the disc radius: scale 86–91, ring 64–68, ring ticks 57–61, glass face 50. */
.timer-art { display: grid; justify-items: center; gap: 16px; width: min(100%, 360px); justify-self: center; }
.timer-glow {
  --arc: conic-gradient(#56a1c5 0deg, #80c4ee 63deg, #636fae 126deg, #c7abe9 189deg, #9f7ae1 252deg, #e0ca5a 288deg, #d6a45a 309.6deg, transparent 0);
  --ring: radial-gradient(closest-side, transparent 0 64%, #000 64.3% 67.7%, transparent 68%);
  position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; border-radius: 50%; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(38% 30% at 82% 38%, rgb(47 127 192 / 34%), transparent),
    radial-gradient(40% 24% at 58% 90%, rgb(58 60 156 / 30%), transparent),
    radial-gradient(36% 32% at 22% 70%, rgb(107 69 184 / 30%), transparent),
    radial-gradient(22% 16% at 26% 22%, rgb(201 144 47 / 16%), transparent),
    radial-gradient(closest-side, #1a2638, #0b111b 70%, #06090f);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), 0 28px 64px -28px rgb(58 60 156 / 55%), var(--shadow);
}
.timer-glow > * { position: absolute; inset: 0; border-radius: 50%; }
.timer-glow-scale {
  background: repeating-conic-gradient(from -.4deg, rgb(255 255 255 / 24%) 0 .8deg, transparent 0 30deg), repeating-conic-gradient(from -.25deg, rgb(255 255 255 / 10%) 0 .5deg, transparent 0 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 0 86%, #000 86.2% 91%, transparent 91.2%); mask: radial-gradient(closest-side, transparent 0 86%, #000 86.2% 91%, transparent 91.2%);
}
.timer-glow-scale::after { content: ""; position: absolute; inset: 3.5%; border-radius: 50%; border: 1px solid rgb(255 255 255 / 7%); }
/* The bloom blurs a wider copy of the arc; the blur sits on the parent so the mask does not clip it. */
.timer-glow-bloom { filter: blur(3.6cqi); mix-blend-mode: screen; animation: timer-glow-breathe 6s ease-in-out infinite alternate; }
.timer-glow-bloom::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--arc); -webkit-mask: radial-gradient(closest-side, transparent 0 55%, #000 61% 71%, transparent 77%); mask: radial-gradient(closest-side, transparent 0 55%, #000 61% 71%, transparent 77%); }
.timer-glow-track { background: rgb(255 255 255 / 9%); -webkit-mask: var(--ring); mask: var(--ring); }
.timer-glow-arc { background: var(--arc); -webkit-mask: var(--ring); mask: var(--ring); }
/* Round start cap at 12 o'clock (the end is covered by the tip). */
.timer-glow-arc::after { content: ""; position: absolute; top: 16.15cqi; left: 50%; width: 1.7cqi; height: 1.7cqi; margin-left: -.85cqi; border-radius: 50%; background: #56a1c5; }
/* A soft light that travels along the ring, like the app's sweep highlight. */
.timer-glow-sheen { background: conic-gradient(transparent 0 300deg, rgb(255 255 255 / 70%) 340deg, transparent 360deg); -webkit-mask: var(--ring); mask: var(--ring); mix-blend-mode: screen; opacity: .55; animation: timer-glow-turn 9s linear infinite; }
.timer-glow-ticks { background: repeating-conic-gradient(from -.6deg, rgb(255 255 255 / 34%) 0 1.2deg, transparent 0 30deg); -webkit-mask: radial-gradient(closest-side, transparent 0 57%, #000 57.2% 61%, transparent 61.2%); mask: radial-gradient(closest-side, transparent 0 57%, #000 57.2% 61%, transparent 61.2%); }
.timer-glow-tip { transform: rotate(309.6deg); }
.timer-glow-tip::before { content: ""; position: absolute; top: 15.85cqi; left: 50%; width: 2.3cqi; height: 2.3cqi; margin-left: -1.15cqi; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 0 .7cqi rgb(214 164 90 / 55%), 0 0 3cqi 1.4cqi rgb(224 202 90 / 60%), 0 0 9cqi 3cqi rgb(214 164 90 / 28%); animation: timer-glow-pulse 3s ease-in-out infinite alternate; }
.timer-glow-face { inset: 25%; display: grid; place-content: center; justify-items: center; gap: 3.4cqi; background: radial-gradient(circle at 50% 28%, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%) 72%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), inset 0 1px 0 rgb(255 255 255 / 10%); text-align: center; color: #fff; }
.timer-glow-face img { width: 14cqi; height: auto; }
.timer-glow-face strong { font: 600 9cqi/1 var(--mono); letter-spacing: -.02em; }
.timer-glow-face span { font-size: 2.6cqi; line-height: 1; font-weight: 700; letter-spacing: .22em; color: rgb(255 255 255 / 62%); }
@keyframes timer-glow-breathe { from { opacity: .75; } to { opacity: 1; } }
@keyframes timer-glow-pulse { from { opacity: .75; transform: scale(.9); } to { opacity: 1; transform: scale(1.08); } }
@keyframes timer-glow-turn { to { transform: rotate(360deg); } }
.timer-platform-grid > :nth-child(1) { --hue: var(--c-blue); --hue-ink: var(--ink-blue); }
.timer-platform-grid > :nth-child(2) { --hue: var(--c-green); --hue-ink: var(--ink-green); }
.timer-platform-grid > :nth-child(3) { --hue: var(--c-orange); --hue-ink: var(--ink-orange); }
.timer-platform-grid > :nth-child(4) { --hue: var(--c-purple); --hue-ink: var(--ink-purple); }

.timer-ribbon { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; margin-top: var(--heading-gap); padding-block: 12px; border-block: 1px solid var(--outline-variant); }
.timer-ribbon span { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--on-surface-variant); }
.timer-ribbon i { width: 8px; height: 8px; border-radius: 50%; background: var(--hue); }
.timer-ribbon i:nth-of-type(1) { --hue: var(--c-red); }
.timer-ribbon i:nth-of-type(2) { --hue: var(--c-yellow); }
.timer-ribbon i:nth-of-type(3) { --hue: var(--c-lightblue); }
.timer-ribbon i:nth-of-type(4) { --hue: var(--c-lightpurple); }

.timer-section { padding-block: var(--section-space) 0; }
.timer-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 16px 48px; margin-bottom: var(--heading-gap); }
.timer-section-heading h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; }
.timer-section-heading p { color: var(--on-surface-variant); line-height: 1.8; }

.timer-platform-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.timer-platform { display: flex; flex-direction: column; gap: 12px; padding: var(--card-space); border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--outline-variant); border-top: 3px solid var(--hue); scroll-margin-top: 24px; }
.timer-card-meta { display: flex; justify-content: space-between; font: 700 11px/1.4 var(--mono); letter-spacing: .08em; color: var(--hue-ink); }
.timer-device { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 124px; margin-block: 2px 4px; padding: 10px; border-radius: var(--radius); background: color-mix(in srgb, var(--hue) var(--tint), var(--surface-card)); }
.timer-device span { display: grid; place-items: center; width: 64px; height: 88px; border-radius: 18px; border: 2px solid color-mix(in srgb, var(--hue) 60%, var(--outline-variant)); background: var(--surface-card); font: 600 18px/1 var(--mono); }
.timer-device-browser span, .timer-device-site span { width: min(100%, 128px); height: 80px; border-radius: 10px; border-top-width: 12px; }
.timer-device i { width: 72px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--hue) 0 42%, var(--outline-variant) 42% 100%); }
.timer-platform h3 { font-size: 19px; }
.timer-platform h4 { font-size: 14px; line-height: 1.7; color: var(--hue-ink); }
.timer-platform p:not(.timer-card-link) { font-size: 14px; color: var(--on-surface-variant); }
.timer-card-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hue) var(--edge), transparent); font-size: 13px; font-weight: 700; color: var(--hue-ink); transition: background-color .2s; }
a.timer-card-link:hover { background: color-mix(in srgb, var(--hue) var(--tint), transparent); }
p.timer-card-link { border-style: dashed; border-color: var(--outline-variant); color: var(--outline); }
.timer-platform-note { margin-top: 24px; font-size: 12px; line-height: 1.9; color: var(--outline); }

.timer-moments { margin-top: var(--section-space); padding-bottom: var(--section-space); background: var(--surface-band); border-block: 1px solid var(--outline-variant); }
.timer-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.timer-use { display: grid; align-content: start; gap: 12px; padding: var(--card-space); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--hue) var(--tint), var(--surface-card)); border: 1px solid color-mix(in srgb, var(--hue) var(--edge), transparent); transition: transform .25s ease, box-shadow .25s ease; }
.timer-use:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.timer-use:nth-child(1) { --hue: var(--c-orange); --hue-ink: var(--ink-orange); }
.timer-use:nth-child(2) { --hue: var(--c-red); --hue-ink: var(--ink-red); }
.timer-use:nth-child(3) { --hue: var(--c-lightblue); --hue-ink: var(--ink-lightblue); }
.timer-use .eyebrow { color: var(--hue-ink); }
.timer-use strong { font: 600 clamp(44px, 5vw, 64px)/1.1 var(--mono); letter-spacing: -.04em; }
.timer-use h3 { font-size: 19px; }
.timer-use p { font-size: 14px; color: var(--on-surface-variant); }
.timer-use .text-link { margin-top: 6px; }
.timer-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; }
.timer-more span { margin-right: 8px; font-size: 13px; font-weight: 700; color: var(--outline); }
.timer-more a { padding: 8px 16px; border-radius: 999px; background: var(--surface-card); border: 1px solid var(--outline-variant); font-size: 13px; font-weight: 700; }
.timer-more a:hover { border-color: var(--outline); }

.timer-faq { max-width: 860px; }
.timer-faq h2 { margin-block: 14px 28px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; }
.timer-faq details { border-bottom: 1px solid var(--outline-variant); }
.timer-faq details:first-of-type { border-top: 1px solid var(--outline-variant); }
.timer-faq details:nth-of-type(1) { --hue: var(--c-green); }
.timer-faq details:nth-of-type(2) { --hue: var(--c-blue); }
.timer-faq details:nth-of-type(3) { --hue: var(--c-pink); }
.timer-faq summary { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 14px 0; font-weight: 700; cursor: pointer; list-style: none; }
.timer-faq summary::-webkit-details-marker { display: none; }
.timer-faq summary::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--hue); }
.timer-faq summary::after { content: "+"; margin-left: auto; font: 400 22px/1 var(--mono); color: var(--outline); }
.timer-faq details[open] summary::after { content: "−"; }
.timer-faq details p { padding: 0 0 24px 24px; font-size: 14px; line-height: 1.8; color: var(--on-surface-variant); }

.timer-closing { display: grid; justify-items: center; gap: 20px; padding-block: var(--section-space) 0; text-align: center; }
.timer-closing img { width: 80px; height: 80px; padding: 16px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface-card) 0 88%, transparent 89.5%), var(--wheel); }
.timer-closing h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.03em; }

@media (max-width: 1100px) {
  .timer-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .timer-hero { grid-template-columns: 1fr; }
  .timer-art { width: min(100%, 240px); }
  .timer-section-heading { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .timer-platform-grid { grid-template-columns: 1fr; }
  .timer-faq details p { padding-left: 0; }
}

@media (min-width: 600px) and (max-width: 899px) {
  .timer-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .timer-use-grid { grid-template-columns: 1fr; }
}