:root { --ink:#101c2f; --muted:#667085; --line:#dce3eb; --paper:#f5f8fa; --white:#fff; --teal:#087f79; --teal-deep:#075c59; --lime:#d9fb69; --coral:#ef6b5f; --blue:#e7f4ff; --shadow:0 18px 50px rgba(16,28,47,.10); }
* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 90% -10%,#d8fff2 0,transparent 30rem),var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.5; }
a { color:var(--teal-deep); }
button,input,select { font:inherit; }
.skip-link { position:absolute; left:1rem; top:-5rem; background:var(--ink); color:#fff; padding:.6rem .8rem; z-index:4; }.skip-link:focus { top:1rem; }
.site-header { min-height:72px; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem max(5vw,1.25rem); border-bottom:1px solid rgba(16,28,47,.08); background:rgba(255,255,255,.77); backdrop-filter:blur(12px); position:sticky; top:0; z-index:3; }
.brand { color:var(--ink); text-decoration:none; display:flex; gap:.65rem; align-items:center; font-size:.98rem; letter-spacing:-.01em; }.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:var(--ink); background:var(--lime); border-radius:8px; font-weight:850; font-size:.72rem; letter-spacing:.05em; }
nav { display:flex; gap:.9rem; flex-wrap:wrap; } nav a { color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:650; } nav a:hover,nav a:focus { color:var(--teal-deep); text-decoration:underline; }
main { width:min(1120px,90vw); margin:0 auto; padding:4.4rem 0 4rem; }
.hero { max-width:840px; margin-bottom:2.3rem; }.eyebrow { margin:0 0 .6rem; text-transform:uppercase; letter-spacing:.105em; font-size:.73rem; font-weight:800; color:var(--teal-deep); }.hero h1 { max-width:760px; margin:0; font-size:clamp(2.05rem,4vw,4rem); line-height:1.02; letter-spacing:-.055em; }.hero p { max-width:700px; margin:1.2rem 0 0; color:var(--muted); font-size:1.06rem; }
.notice { display:flex; gap:.75rem; align-items:flex-start; padding:1rem 1.1rem; background:var(--blue); border:1px solid #cce5f6; border-radius:12px; color:#254c68; font-size:.92rem; }.notice b { color:var(--ink); }.notice.compact { margin:0 0 1.4rem; }.notice-icon { width:1.5rem; flex:0 0 auto; font-weight:900; }
.cases-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }.case-card { position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:240px; padding:1.4rem; border:1px solid var(--line); border-radius:18px; background:var(--white); box-shadow:0 5px 18px rgba(16,28,47,.04); text-decoration:none; color:var(--ink); transition:transform .18s,box-shadow .18s; }.case-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }.case-card .case-letter { display:grid; place-items:center; height:28px; width:28px; border-radius:7px; font-weight:900; font-size:.78rem; background:var(--lime); }.case-card:nth-child(2) .case-letter { background:#cfe7ff; }.case-card:nth-child(3) .case-letter { background:#f5ddff; }.case-card:nth-child(4) .case-letter { background:#ffdcd5; }.case-card h2 { margin:1rem 0 .45rem; letter-spacing:-.03em; font-size:1.32rem; }.case-card p { margin:0; color:var(--muted); font-size:.93rem; }.case-card .go { margin-top:auto; padding-top:1.2rem; color:var(--teal-deep); font-size:.9rem; font-weight:800; }
.page-grid { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:1.3rem; }.form-card,.debug-panel,.confirm-card,.mapping-card { background:var(--white); border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 18px rgba(16,28,47,.04); }.form-card { padding:clamp(1.2rem,3vw,2rem); }.form-card h2 { margin:0; letter-spacing:-.035em; }.form-intro { color:var(--muted); margin:.6rem 0 1.5rem; font-size:.95rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.field { display:grid; gap:.42rem; }.field.full { grid-column:1/-1; }.field label { font-size:.88rem; font-weight:750; }.field input,.field select { min-width:0; width:100%; padding:.75rem .82rem; border:1px solid #bfcbd7; border-radius:9px; color:var(--ink); background:#fff; outline:none; }.field input:focus,.field select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,127,121,.14); }.field small { color:var(--muted); font-size:.76rem; }
.consent-row { display:flex; gap:.7rem; align-items:flex-start; margin:1.35rem 0; padding:1rem; border:1px solid #d7e5e4; background:#f7fbfa; border-radius:10px; }.consent-row input { width:1.1rem; height:1.1rem; margin:.2rem 0 0; accent-color:var(--teal); }.consent-row label { font-size:.9rem; }.text-button { padding:0; border:0; color:var(--teal-deep); background:none; cursor:pointer; text-decoration:underline; font-weight:700; }
.form-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }.button { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.72rem 1rem; border:1px solid var(--teal-deep); border-radius:9px; color:#fff; background:var(--teal-deep); font-weight:800; text-decoration:none; }.button:hover { background:var(--teal); }.button.secondary { border-color:var(--line); color:var(--ink); background:#fff; }.button.secondary:hover { background:#f7fafb; }.validation { display:none; margin:0; color:#a33228; font-size:.88rem; font-weight:650; }.validation.visible { display:block; }
.debug-panel { position:sticky; top:92px; overflow:hidden; }.debug-head { padding:1rem 1.1rem; border-bottom:1px solid var(--line); background:#101c2f; color:#fff; }.debug-head .eyebrow { margin:0; color:var(--lime); }.debug-head h2 { margin:.14rem 0 0; font-size:1rem; }.debug-body { padding:1rem 1.1rem; }.debug-row { display:flex; justify-content:space-between; gap:.75rem; padding:.6rem 0; border-bottom:1px solid #edf0f3; font-size:.88rem; }.debug-row span { color:var(--muted); }.status { font-weight:850; }.status.yes { color:#087f79; }.status.no { color:#aa4b43; }.payload-title { display:block; margin-top:1rem; color:var(--muted); font-size:.77rem; font-weight:750; }.payload { display:block; min-height:52px; max-height:245px; overflow:auto; margin:.45rem 0 0; padding:.7rem; border-radius:8px; color:#d9fb69; background:#17263e; font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; word-break:break-word; }.debug-caption { margin:.75rem 0 0; color:var(--muted); font-size:.74rem; }
.confirm-card { max-width:720px; padding:clamp(1.4rem,4vw,3rem); }.confirm-icon { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--lime); color:var(--ink); font-weight:900; font-size:1.4rem; }.confirm-card h1 { margin:1rem 0 .55rem; font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.045em; }.confirm-card p { max-width:590px; color:var(--muted); }.result-shell { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:1.3rem; align-items:start; }.result-action { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.45rem; }
.technical-label { display:inline-flex; margin:0 0 .75rem; padding:.3rem .52rem; border-radius:5px; color:#174b72; background:#e4f3ff; font:700 .73rem ui-monospace,SFMono-Regular,Menlo,monospace; }.mapping-card { grid-column:1/-1; padding:1.4rem; }.mapping-card h2 { margin:0 0 .35rem; letter-spacing:-.03em; }.mapping-card p { color:var(--muted); font-size:.92rem; }.mapping { display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; margin-top:1rem; }.mapping div { padding:.7rem; border-radius:8px; background:#f6f8fa; font-size:.88rem; }.mapping code { color:var(--teal-deep); font-weight:800; }
.external { display:grid; gap:1rem; }.external-card { padding:1.2rem; border:1px solid #cfdbef; border-radius:14px; background:#f4f8ff; }.external-card h2 { margin:0; }.external-card p { margin:.55rem 0 0; color:#456073; }.external-banner { padding:.9rem 1rem; border-left:4px solid var(--coral); color:#6e3933; background:#fff3f0; border-radius:0 8px 8px 0; font-size:.9rem; }
dialog { width:min(560px,calc(100vw - 2rem)); padding:0; border:0; border-radius:16px; box-shadow:0 24px 80px rgba(16,28,47,.32); } dialog::backdrop { background:rgba(16,28,47,.58); }.dialog-content { padding:1.4rem; }.dialog-content h2 { margin:.2rem 0 .8rem; letter-spacing:-.035em; }.dialog-content p { color:var(--muted); }.dialog-topline { display:flex; justify-content:space-between; align-items:center; }.icon-button { width:32px; height:32px; cursor:pointer; border:0; border-radius:50%; color:var(--ink); background:#edf1f5; font-size:1.35rem; line-height:1; }.no-script { padding:1rem; color:#9d302a; text-align:center; }
@media (max-width:800px) { .site-header { position:static; align-items:flex-start; flex-direction:column; }.page-grid,.result-shell { grid-template-columns:1fr; }.debug-panel { position:static; grid-row:auto; }.form-grid,.cases-grid,.mapping { grid-template-columns:1fr; }.field.full { grid-column:auto; } main { width:min(94vw,680px); padding-top:2.5rem; } }
@media (max-width:420px) { nav { gap:.65rem; }.site-header { padding:1rem 4vw; }.hero h1 { font-size:2.15rem; } }