/* Shared navigation and title screen; mode playfields keep their own styles. */
.mode-nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mode-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid #6283ad;border-radius:10px;color:#edf4ff;text-decoration:none;font:600 13px system-ui;letter-spacing:0}.mode-nav a:hover{background:#294a70}.mode-nav a:focus-visible{outline:3px solid #ffce7b;outline-offset:3px}header{flex-wrap:wrap}.title-page{margin:0;min-height:100vh;background:radial-gradient(ellipse at 15% 0,#1a3c68,transparent 65%),#10233c;color:#edf4ff;font-family:system-ui,sans-serif}.title-page *{box-sizing:border-box}.title-main{max-width:1020px;margin:auto;padding:24px}.title-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;letter-spacing:2px;color:#b0c9e6}.title-page button{font:600 14px system-ui;min-height:44px;padding:10px 18px;border:1px solid #6686b2;border-radius:10px;background:#213e63;color:#f2f6ff;cursor:pointer;touch-action:manipulation}.title-page button:focus-visible,.mode-card:focus-visible{outline:3px solid #ffd58a;outline-offset:5px}.title-hero{text-align:center;padding:44px 0 26px}.eyebrow{font-size:11px;letter-spacing:3px;color:#e3c480;margin-top:26px}.title-hero h1{font-size:clamp(27px,5vw,47px);line-height:1.25;margin:12px 0;overflow-wrap:anywhere}.title-hero>p:last-child{color:#bdd3ec;font-size:16px}.toast-mark{display:inline-block;position:relative;width:90px;height:65px;border:7px solid #a9652d;border-radius:24px 24px 15px 15px;background:linear-gradient(#ffe5a4,#dba25b);transform:rotate(-12deg);box-shadow:5px 6px 0 #07182b44}.toast-mark i{position:absolute;width:29px;height:18px;left:24px;top:17px;background:linear-gradient(#fff8c6,#f5cf60);border-radius:5px;box-shadow:1px 2px 3px #88572666}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.mode-card{display:flex;flex-direction:column;min-width:0;padding:27px;border:1px solid #5a7ba5;border-radius:18px;background:linear-gradient(145deg,#25466b,#192f50);text-decoration:none;color:#edf4ff;transition:border-color .15s,transform .15s}.mode-card:hover{border-color:#ffda8c;transform:translateY(-2px)}.mode-number{font-size:11px;letter-spacing:2px;color:#afcae6}.mode-card h2{font-size:30px;letter-spacing:2px;margin:17px 0 4px}.mode-card p{flex:1;font-size:15px;line-height:1.8;color:#c8d9eb;overflow-wrap:anywhere}.mode-card strong{font-size:16px;color:#ffe0a0;margin-top:14px}.title-help{max-width:680px;margin:26px auto 0;text-align:center;color:#d5e1f0;font-size:14px;line-height:1.8}.title-page footer{text-align:center;font-size:12px;color:#9ab7d6;padding:26px 0 10px}@media(max-width:600px){.title-main{padding:16px}.title-hero{padding:30px 0 18px}.mode-grid{grid-template-columns:minmax(0,1fr);gap:14px}.mode-card{padding:20px}.mode-card h2{font-size:26px;margin-top:12px}.mode-card strong{margin-top:8px}.title-header{font-size:10px;letter-spacing:1px}.mode-nav{gap:6px}header>.mode-nav{flex-wrap:wrap}.mode-nav a{font-size:12px;padding:7px 9px}}@media(prefers-reduced-motion:reduce){.mode-card{transition:none}}

.record-note{font-size:12px;color:#f1ce99;line-height:1.7}.record-note:empty{display:none}