:root { color-scheme: dark; --bg: #0a0f1f; --panel: rgba(20, 28, 51, 0.92); --panel-strong: #17213d; --line: #33415f; --line-soft: rgba(116, 139, 181, 0.22); --text: #f6f8ff; --muted: #aab5cd; --accent: #7c9cff; --accent-strong: #9bb1ff; --accent-ink: #081029; --danger: #ff9191; --success: #87e9bb; --focus: #b8c7ff; --shadow: 0 20px 60px rgba(0, 0, 0, 0.28); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; font-synthesis: none; } * { box-sizing: border-box; } html { min-width: 320px; min-height: 100%; background: var(--bg); scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; color: var(--text); background: radial-gradient(circle at 12% 0%, rgba(91, 121, 255, 0.16), transparent 36rem), radial-gradient(circle at 90% 18%, rgba(73, 212, 178, 0.09), transparent 30rem), var(--bg); -webkit-tap-highlight-color: transparent; } button, input { font: inherit; } button { touch-action: manipulation; } .app-shell { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: calc(48px + env(safe-area-inset-top)) env(safe-area-inset-right) calc(28px + env(safe-area-inset-bottom)) env(safe-area-inset-left); } .hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; } .hero-copy { min-width: 0; } .hero-tools { display: grid; flex: 0 0 auto; gap: 10px; min-width: 260px; } .eyebrow, .step-label { margin: 0 0 8px; color: var(--accent-strong); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.15em; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 12px; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.06; letter-spacing: -0.04em; } h2 { margin-bottom: 0; font-size: 1.35rem; letter-spacing: -0.02em; } .lead { max-width: 44rem; margin-bottom: 0; color: var(--muted); line-height: 1.7; } .utc-clock { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(10, 15, 31, 0.8); box-shadow: var(--shadow); } .utc-clock span, .utc-clock small { display: block; color: var(--muted); font-size: 0.76rem; } .utc-clock strong { display: block; margin: 5px 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .install-guide { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(155, 177, 255, 0.4); border-radius: 14px; background: rgba(35, 48, 82, 0.8); } .install-guide strong { display: block; margin-bottom: 4px; font-size: 0.88rem; } .install-guide p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.55; } .panel { margin-top: 20px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line-soft); border-radius: 20px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .field label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.86rem; font-weight: 700; } .mobile-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } input { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--text); background: #0e162b; font-size: 1rem; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; } input:hover { border-color: #52658b; } input:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(155, 177, 255, 0.18); } input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 145, 145, 0.12); } input::placeholder { color: #687692; } .destination-field { max-width: 560px; margin-bottom: 26px; } .field-error, .form-error { min-height: 1.15em; margin: 6px 0 0; color: var(--danger); font-size: 0.76rem; line-height: 1.35; } .form-error { min-height: 0; margin-top: 16px; font-size: 0.84rem; } .leader-header, .leader-row { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 110px 48px; gap: 12px; align-items: start; } .leader-header { padding: 0 0 8px; color: var(--muted); font-size: 0.76rem; font-weight: 700; } .leader-list { display: grid; gap: 9px; } .leader-row { position: relative; padding: 12px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(8, 14, 30, 0.52); } .leader-row-number { display: none; } .duration-field input { text-align: right; font-variant-numeric: tabular-nums; } .button, .icon-button, .copy-row { min-height: 44px; border: 0; border-radius: 10px; cursor: pointer; font-weight: 800; transition: transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease; } .button:focus-visible, .icon-button:focus-visible, .copy-row:focus-visible { outline: 3px solid rgba(184, 199, 255, 0.6); outline-offset: 2px; } .button:hover, .icon-button:hover, .copy-row:hover { filter: brightness(1.09); } .button:active, .icon-button:active, .copy-row:active { transform: translateY(1px); } .button:disabled, .icon-button:disabled, .copy-row:disabled { cursor: not-allowed; opacity: 0.4; } .button { padding: 11px 18px; } .button.primary { color: var(--accent-ink); background: var(--accent-strong); } .button.secondary { border: 1px solid var(--line); color: var(--text); background: #202d4d; } .button.ghost { border: 1px solid transparent; color: var(--muted); background: transparent; } .button.compact { min-height: 40px; padding: 8px 13px; font-size: 0.82rem; } .install-button { width: 100%; } .icon-button { width: 44px; height: 48px; padding: 0; color: var(--muted); background: transparent; font-size: 1.25rem; } .dismiss-install { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; } .form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; } .summary-card { min-height: 124px; padding: 18px; border: 1px solid var(--line-soft); border-radius: 14px; background: #101a31; } .summary-card.featured { border-color: rgba(155, 177, 255, 0.58); background: linear-gradient(145deg, rgba(91, 121, 255, 0.24), rgba(16, 26, 49, 0.9)); } .summary-card span, .summary-card small { display: block; color: var(--muted); font-size: 0.76rem; } .summary-card strong { display: block; margin-top: 10px; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(0.9rem, 2vw, 1.08rem); font-variant-numeric: tabular-nums; } .summary-card small { margin-top: 8px; } .summary-card small.expired { color: var(--danger); font-weight: 800; } .result-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 14px; -webkit-overflow-scrolling: touch; } .result-table { width: 100%; min-width: 760px; border-collapse: collapse; } .result-table th, .result-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); text-align: left; } .result-table th { color: var(--muted); background: rgba(8, 14, 30, 0.66); font-size: 0.72rem; letter-spacing: 0.02em; } .result-table td { font-size: 0.88rem; } .result-table tbody tr:last-child td { border-bottom: 0; } .result-table td:nth-child(2), .result-table td:nth-child(3), .result-table td:nth-child(4) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; } .copy-row { min-height: 38px; padding: 7px 12px; color: var(--text); background: #263555; white-space: nowrap; } .result-note { margin: 16px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.65; } footer { padding: 24px 6px 0; color: var(--muted); font-size: 0.76rem; text-align: center; } footer p { margin-bottom: 0; } .toast { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 20; max-width: min(360px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid rgba(135, 233, 187, 0.4); border-radius: 10px; color: #dcfff0; background: rgba(15, 50, 42, 0.96); box-shadow: var(--shadow); font-size: 0.84rem; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 160ms ease, transform 160ms ease; } .toast.visible { opacity: 1; transform: translateY(0); } .toast.error { border-color: rgba(255, 145, 145, 0.5); background: rgba(89, 28, 34, 0.97); } .copy-buffer { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .noscript { margin: 0; padding: 16px; color: white; background: #7b2424; text-align: center; } [hidden] { display: none !important; } @media (max-width: 760px) { html { scroll-padding-top: 10px; } .app-shell { width: min(100% - 20px, 1080px); padding-top: calc(22px + env(safe-area-inset-top)); } .panel { padding: 20px 16px; border-radius: 17px; backdrop-filter: none; } .hero { display: grid; gap: 18px; align-items: stretch; } .hero-tools { min-width: 0; } h1 { font-size: clamp(2rem, 11vw, 2.8rem); } .lead { font-size: 0.92rem; line-height: 1.6; } .utc-clock { min-width: 0; } .section-heading { align-items: flex-start; } .leader-header { display: none; } .leader-row { grid-template-columns: minmax(0, 1fr) minmax(90px, 0.42fr) minmax(82px, 0.34fr) 44px; padding: 14px; } .leader-row-number { display: block; grid-column: 1 / 4; color: var(--accent-strong); font-size: 0.78rem; font-weight: 800; } .remove-leader { grid-column: 4; grid-row: 1; height: 40px; min-height: 40px; margin-top: -8px; } .mobile-field-label { position: static; width: auto; height: auto; margin: 0 0 6px; overflow: visible; clip: auto; white-space: normal; } .summary-grid { grid-template-columns: 1fr; } .summary-card { min-height: 0; } .result-table-wrap { overflow: visible; border: 0; border-radius: 0; } .result-table { display: block; min-width: 0; } .result-table thead { display: none; } .result-table tbody { display: grid; gap: 10px; } .result-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(8, 14, 30, 0.52); } .result-table td { min-width: 0; padding: 0; border: 0; } .result-table td::before { display: block; margin-bottom: 4px; color: var(--muted); content: attr(data-label); font-family: inherit; font-size: 0.68rem; font-weight: 700; } .result-table td:nth-child(1) { grid-column: 1; grid-row: 1; } .result-table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; } .result-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; white-space: normal; } .result-table td:nth-child(4) { grid-column: 1; grid-row: 3; } .result-table td:nth-child(5) { grid-column: 2; grid-row: 3; align-self: end; } .result-table td:nth-child(5)::before { display: none; } } @media (max-width: 520px) { .section-heading { display: grid; } .result-heading-row { grid-template-columns: 1fr auto; } .leader-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 10px; } .leader-row-number { grid-column: 1 / 3; } .leader-name-field { grid-column: 1 / -1; } .leader-row .duration-field:nth-child(3) { grid-column: 1; } .leader-row .duration-field:nth-child(4) { grid-column: 2; } .remove-leader { grid-column: 3; } .form-actions { position: sticky; z-index: 5; bottom: max(8px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 10px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(10, 15, 31, 0.96); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .calculate-button { min-height: 50px; } .form-actions .button.ghost { min-width: 52px; padding-inline: 10px; font-size: 0.78rem; } .toast { right: 16px; left: 16px; max-width: none; text-align: center; } } @media (display-mode: standalone) { .install-guide, .install-button { display: none !important; } .app-shell { padding-top: calc(18px + env(safe-area-inset-top)); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }