:root{color-scheme:light;--ink:#0b203d;--blue:#2864ee;--muted:#687b95;--line:#dce5f1}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 0%,#e8efff 0,transparent 48%),#f7f9fc;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;-webkit-font-smoothing:antialiased}
main{width:min(1160px,100%);min-height:100svh;margin:auto;padding:40px;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}header{align-self:center;text-align:left}.identity{display:flex;align-items:center;gap:14px}.logo-mark{display:grid;place-items:center;width:54px;height:58px;border-radius:17px;background:linear-gradient(145deg,#2969f2,#102e63);color:white;font-size:32px;font-weight:800;box-shadow:0 8px 20px #1747831a}.brand{display:block;font-size:24px;letter-spacing:4px;font-weight:800}.brand-detail{display:block;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:1.7px;margin-top:5px}.welcome{margin:48px 0 32px}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--blue);font-size:12px;letter-spacing:1px;font-weight:700}.eyebrow:before{content:'';width:24px;height:2px;background:var(--blue)}h1{font-size:19px;font-weight:600;letter-spacing:-.5px;margin:16px 0}.motto{font-size:clamp(32px,3.8vw,48px);letter-spacing:-2px;line-height:1.25;margin:22px 0}.motto em{font-style:normal;color:var(--blue)}.welcome-copy{font-size:15px;line-height:1.9;color:var(--muted)}.method{display:flex;gap:12px;align-items:center;padding:22px 0;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:#415773}.method i{width:3px;height:3px;border-radius:50%;background:#9bacc3}#clock{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;margin:4px 0}
.terminal{min-width:0}#check,form{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 18px 60px #12366b09}#check:before,form:before{content:'';display:block;width:32px;height:4px;border-radius:3px;background:var(--blue);margin:0 auto 20px}.instruction{text-align:center;font-size:19px;font-weight:650;letter-spacing:-.5px;margin:0 0 20px}input{width:100%;border:1px solid #ccd9ed;border-radius:13px;padding:16px;font:inherit;font-size:18px;color:var(--ink)}input:focus-visible{outline:3px solid #a4bef6;outline-offset:2px}#code{text-align:center;font-size:28px;letter-spacing:8px;background:#f7f9fd;height:66px}#code::placeholder{font-size:19px;letter-spacing:2px;color:#8090a7}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.keypad button{font-size:27px;height:64px;background:#f0f4f9;color:var(--ink);font-variant-numeric:tabular-nums}.keypad button:nth-child(10),.keypad button:nth-child(12){font-size:17px;color:#61748f}button{border:0;border-radius:12px;font:inherit;font-weight:650;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #8daef1;outline-offset:3px}button:active{transform:scale(.97);filter:brightness(.94)}button:disabled{opacity:.5;cursor:wait}.actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions button{height:65px;font-size:23px}.primary{background:var(--blue);color:white}.teal{background:#147d7a;color:white}.hint{text-align:center;color:var(--muted);font-size:11px;line-height:1.6;margin:16px 0 0}#message{min-height:52px;margin:14px 0 6px;text-align:center;font-size:19px;line-height:1.5;font-weight:700;white-space:pre-line;color:#12756d}#message.error{color:#b83248}footer{display:flex;justify-content:space-between;align-items:center;color:#7a8ba1;font-size:9px;letter-spacing:1.5px;min-height:32px;padding:0 4px}footer button{background:transparent;color:#667991;font-size:11px;letter-spacing:0;padding:10px}label{display:block;margin:20px 0;font-size:14px;font-weight:600}label input{margin-top:9px}form h2{font-size:23px;letter-spacing:-.8px}form p{color:var(--muted);font-size:14px;line-height:1.7}form button{width:100%;padding:18px;font-size:18px}[hidden]{display:none!important}
@media(max-width:850px){main{width:min(610px,100%);display:block;padding:28px 24px 16px}.identity{justify-content:center}.welcome{text-align:center;margin:20px 0 12px}.eyebrow,.welcome-copy,.method{display:none}h1{font-size:23px;margin:14px 0 10px}.motto{font-size:17px;letter-spacing:-.5px;margin:8px 0;font-weight:600}.motto br{display:none}.motto em{margin-left:4px}#clock{text-align:center;margin:14px 0 22px}.logo-mark{width:42px;height:46px;font-size:27px;border-radius:13px}.brand{font-size:20px}.brand-detail{font-size:8px}}
@media(min-width:851px) and (max-height:800px){main{padding:24px 36px;gap:44px}.welcome{margin:30px 0 22px}#check,form{padding:22px}#check:before,form:before{margin-bottom:14px}.keypad button{height:52px}.keypad{gap:8px;margin:14px 0}.actions button{height:58px}#message{min-height:48px}}
@media(max-width:420px){main{padding:20px 14px 12px}#check,form{padding:20px}.instruction{font-size:17px}.keypad button{height:57px}#code::placeholder{font-size:16px}.hint{font-size:10px}}

/* A quiet academy identity at left; the touch terminal owns two thirds. */
main{width:100%;min-height:100svh;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0;align-items:stretch}
header{position:relative;isolation:isolate;overflow:hidden;align-self:stretch;display:flex;flex-direction:column;padding:clamp(24px,3.3vw,56px);color:white;background:#0b203d}
header:before{content:'';position:absolute;inset:0;z-index:-2;background:url('/kiosk-assets/reception.jpg') 62% center/cover no-repeat;opacity:.48}
header:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,24,45,.93),rgba(7,24,45,.58) 48%,rgba(7,24,45,.9))}
.identity{gap:12px}.logo-mark{flex-shrink:0;background:linear-gradient(145deg,#3378ff,#194b95);box-shadow:0 6px 22px #0002}.brand{font-size:22px}.brand-detail{color:#bccbe0;font-size:8px;letter-spacing:1.2px}
.welcome{margin:clamp(28px,5vh,56px) 0 24px}.eyebrow{color:#b9d2ff;font-size:11px}.eyebrow:before{background:#95baff;width:18px}h1{font-size:17px;color:#d7e3f5;margin:18px 0}.motto{font-size:clamp(28px,3.1vw,46px);letter-spacing:-1.6px;line-height:1.3;white-space:nowrap}.motto em{color:#a9caff}.welcome-copy{color:#d1dcea;font-size:14px;line-height:1.8}
.note-photo{margin:auto 0 24px;border-radius:16px;overflow:hidden;background:#f3eee6;box-shadow:0 16px 36px #0003}.note-photo img{display:block;width:100%;aspect-ratio:1.8;object-fit:cover;object-position:75% center}.note-photo figcaption{display:flex;flex-direction:column;gap:5px;padding:14px 16px;color:#142b46}.note-photo strong{font-size:11px;letter-spacing:2px}.note-photo figcaption span{font-size:11px;color:#657080}.method{border-color:#ffffff26;color:#c2d2e6;justify-content:space-between;font-size:11px;padding:18px 0 0}.method i{background:#8eabc7}
.terminal{width:100%;max-width:1000px;margin:auto;padding:28px clamp(24px,4vw,64px) 16px}.terminal-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 4px 18px}.terminal-heading>span{color:var(--blue);font-weight:750;font-size:11px;letter-spacing:2px}#clock{margin:0;text-align:right;font-size:13px}
#check,form{padding:clamp(22px,3vw,40px);border-radius:24px}.instruction{font-size:clamp(19px,2vw,25px)}.keypad button{height:clamp(60px,8.5vh,86px);font-size:30px}.keypad{gap:12px;margin:20px 0}.actions button{height:70px}.hint{font-size:12px}#message{min-height:48px;font-size:18px;margin:12px 0 2px}
@media(min-width:851px) and (max-height:800px){header{padding:28px}.welcome{margin:24px 0 16px}.welcome-copy{display:none}.note-photo{margin-top:12px;margin-bottom:16px}.terminal{padding:20px 30px 10px}#check,form{padding:22px}.keypad button{height:52px}.keypad{gap:8px;margin:14px 0}.actions button{height:58px}.terminal-heading{margin-bottom:12px}.motto{font-size:30px}#message{min-height:44px}.note-photo img{aspect-ratio:2}}
@media(max-width:850px){main{display:block;width:100%;padding:0}header{padding:22px 28px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}header:before{background-position:center 56%}.identity{justify-content:flex-start}.welcome{margin:0;text-align:right}.eyebrow,.welcome-copy,.method,.note-photo{display:none}h1{font-size:16px;margin:0 0 8px}.motto{font-size:19px;line-height:1.35;letter-spacing:-.5px;margin:0}.motto br{display:block}.motto em{margin-left:0}.terminal{max-width:720px;padding:22px 24px 12px}.terminal-heading{margin-bottom:16px}#clock{margin:0;font-size:12px}.keypad button{height:64px}.actions button{height:64px}#check,form{padding:24px}.hint{font-size:11px}}
@media(max-width:480px){header{padding:20px;grid-template-columns:1fr}.welcome{text-align:left}.welcome h1{display:none}.motto{font-size:16px}.motto br{display:none}.motto em{margin-left:4px}.terminal{padding:18px 14px 8px}.terminal-heading>span{font-size:9px;letter-spacing:1px}#clock{font-size:11px}#check,form{padding:20px}.keypad button{height:57px}.hint{font-size:10px}}