:root{color-scheme:light;--navy:#152339;--navy2:#203653;--ink:#203047;--muted:#56677d;--cream:#fffaf0;--paper:#fffdf8;--coral:#ee755f;--coral-dark:#b94e42;--yellow:#ffca75;--mint:#b5ead9;--line:#d6dfea;font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}*{box-sizing:border-box}html{min-width:320px}body{margin:0;background:radial-gradient(circle at 85% 0,#ffe5cf 0,transparent 30%),linear-gradient(180deg,#fffaf1,#f0f5f6 65%,#e9f0f4);min-height:100dvh}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #287d8b;outline-offset:3px}[hidden]{display:none!important}.shell{max-width:1050px;min-height:100dvh;margin:auto;padding:0 22px;display:flex;flex-direction:column}.site-head{height:72px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #b9cbd1}.back{color:var(--muted);text-decoration:none;font-size:14px}.back:hover{color:var(--navy)}.brand{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--navy);font-size:16px;letter-spacing:.11em;font-weight:900;white-space:nowrap}.brand b{color:var(--coral-dark)}.brand i{font-style:normal;font-size:12px;letter-spacing:0;color:white;background:var(--navy);padding:3px 5px;border-radius:5px}.brand-icon{font-size:25px;line-height:1;color:var(--coral)}.icon-button{width:42px;height:42px;border:1px solid #bfccd5;border-radius:13px;background:#ffffffa8;color:var(--navy);font-size:25px;line-height:1}.screen{flex:1}.home{padding:38px 0 22px}.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:20px;align-items:center;min-height:295px}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:900;color:var(--coral-dark)}.hero h1{font-size:clamp(37px,5.3vw,66px);line-height:1.04;letter-spacing:-.045em;color:var(--navy);margin:15px 0}.hero h1 em{font-style:normal;color:var(--coral-dark)}.hero-copy p{max-width:510px;color:var(--muted);line-height:1.6;font-size:16px}.hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.hero-badges span{font-size:12px;font-weight:800;background:#ffffffaa;border:1px solid var(--line);padding:8px 11px;border-radius:100px}.hero-art{position:relative;min-height:260px;display:grid;place-items:center;background:#203653;border-radius:36px;overflow:hidden;box-shadow:0 18px 45px #1d3b5633;transform:rotate(3deg)}.hero-art:before{content:"";position:absolute;width:290px;height:290px;border:1px solid #ffffff30;border-radius:50%;box-shadow:0 0 0 45px #ffffff0a}.art-grid{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:3px;transform:rotate(-12deg);z-index:1}.art-grid span{border-radius:10px;background:#ffffff18}.art-grid span:nth-child(2),.art-grid span:nth-child(4),.art-grid span:nth-child(5),.art-grid span:nth-child(8){background:var(--coral);box-shadow:inset -5px -5px #b94e42,0 4px #9b3b35}.art-arrow{position:absolute;top:12px;right:24px;font-size:63px;color:var(--yellow)}.art-word{position:absolute;bottom:15px;right:20px;color:var(--yellow);font-size:25px;font-weight:1000;letter-spacing:.05em}.section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:24px 0 13px}.section-head h2{margin:0;font-size:23px;color:var(--navy)}.section-head p{margin:0;color:var(--muted);font-size:13px}.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode{text-align:left;background:var(--paper);color:var(--ink);border:1px solid #ced9e0;border-radius:19px;min-height:88px;padding:14px 18px;display:grid;grid-template-columns:46px 1fr 25px;align-items:center;gap:10px;box-shadow:0 7px 0 #d7e2e733;transition:transform .16s,box-shadow .16s,border-color .16s}.mode:hover{transform:translateY(-3px);border-color:var(--coral);box-shadow:0 10px 22px #c3d4db80}.mode-symbol{width:42px;height:42px;border-radius:14px;background:#fff0e5;color:var(--coral-dark);display:grid;place-items:center;font-size:26px;font-weight:800}.mode b{display:block;color:var(--navy);font-size:18px}.mode small{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.3}.go{font-size:21px;color:var(--coral-dark)}.record{text-align:center;color:var(--muted);font-size:14px;margin:24px 0 0}.record strong{color:var(--coral-dark)}footer{text-align:center;color:#728295;font-size:12px;padding:25px 0}.game{padding:22px 0}.game-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.game h1{font-size:clamp(25px,4vw,37px);line-height:1.1;letter-spacing:-.025em;color:var(--navy);margin:6px 0 14px}.text-button{border:0;background:none;color:var(--muted);padding:8px 0;font-size:14px}.text-button:hover{color:var(--navy)}.stats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.stats span{background:#fff;border:1px solid var(--line);padding:7px 12px;border-radius:10px;color:var(--muted);font-size:13px}.stats b{color:var(--navy);font-size:16px;margin-left:5px}.play-area{max-width:740px;margin:auto}.reference{position:relative;min-height:218px;border-radius:24px;background:var(--navy);display:grid;place-items:center;overflow:hidden;box-shadow:0 12px 28px #18334b30}.reference:before,.choice:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff20 1px,transparent 1px);background-size:18px 18px;opacity:.55;pointer-events:none}.figure-label{position:absolute;top:16px;left:18px;color:var(--yellow);font-size:12px;letter-spacing:.16em;font-weight:900}.ref-note{position:absolute;bottom:15px;right:17px;color:#c4d3df;font-size:12px}.figure{display:grid;place-items:center;position:relative;z-index:1}.figure svg{display:block;width:min(100%,140px);height:auto}.model-figure svg{width:min(100%,180px);transform:rotate(0deg);transition:transform .55s ease-in-out}.model-figure.reveal svg{transform:rotate(var(--turn))}.connector{display:flex;align-items:center;gap:14px;justify-content:center;color:#738391;font-size:11px;letter-spacing:.16em;font-weight:900;padding:14px}.connector span{width:50px;height:1px;background:#b6c7cc}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.choice{height:155px;background:#fffdf8;border:2px solid #d2dfe3;color:var(--ink);border-radius:20px;position:relative;display:grid;place-items:center;transition:transform .16s,border-color .16s,background .16s;overflow:hidden}.choice:before{background-image:radial-gradient(#20365318 1px,transparent 1px)}.choice:hover:not(:disabled){transform:translateY(-2px);border-color:var(--coral)}.choice:last-child:nth-child(odd){grid-column:1/-1}.choice-letter{position:absolute;top:12px;left:13px;width:32px;height:32px;display:grid;place-items:center;background:#f6e7df;border:1px solid #e8c5b7;color:var(--coral-dark);border-radius:9px;font-weight:900;font-size:13px;z-index:2}.choice.correct{border:3px solid #2f9e77;background:#ddf7ea}.choice.correct .choice-letter{background:#2f9e77;color:white;border-color:#2f9e77}.choice.wrong{border:3px solid #d85e66;background:#ffebea}.choice.wrong .choice-letter{background:#d85e66;color:white;border-color:#d85e66}.choice.dim{opacity:.63}.choice.pop{animation:pop .36s ease-out}@keyframes pop{50%{transform:scale(1.045);box-shadow:0 0 0 11px #ffca7555}}.feedback{text-align:center;color:var(--muted);min-height:25px;margin:15px auto 10px}.feedback.good{color:#237454;font-weight:800}.feedback.bad{color:#af4248;font-weight:800}.primary,.secondary{border-radius:13px;min-height:48px;border:0;padding:11px 20px;font-weight:900}.primary{background:var(--coral);color:white;box-shadow:0 5px 0 var(--coral-dark)}.primary:hover{background:#f18972}.secondary{background:#e0e8eb;color:var(--navy);border:1px solid #b9cbd1}.next{display:block;margin:0 auto 12px}.result{text-align:center;padding:72px 0 20px}.result-graphic{width:100px;height:100px;border-radius:30px;background:#fff0e3;color:var(--coral);display:grid;place-items:center;margin:0 auto 23px;font-size:64px;transform:rotate(-9deg)}.result h1{font-size:clamp(34px,6vw,57px);color:var(--navy);margin:12px}.result p{color:var(--muted)}.score-card{max-width:290px;background:var(--navy);border-radius:22px;margin:28px auto;padding:21px}.score-card span{display:block;color:#bfcfdb;font-size:12px;letter-spacing:.18em;font-weight:800}.score-card strong{display:block;color:var(--yellow);font-size:58px;line-height:1.1}.result-actions{display:flex;justify-content:center;gap:12px}dialog{border:1px solid #b8c8d2;background:#fffdf8;color:var(--ink);border-radius:22px;box-shadow:0 25px 90px #0c243275;padding:23px;max-width:min(92vw,440px)}dialog::backdrop{background:#0a1b2bc9}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.dialog-head h2{margin:0;color:var(--navy)}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0}.setting-row select{padding:9px;background:#fff;border:1px solid #b5c6d2;border-radius:9px;color:var(--navy)}.setting-row input{width:23px;height:23px;accent-color:var(--coral)}.dialog-note{color:var(--muted);line-height:1.5;font-size:14px}.danger{background:none;border:1px solid #cc8584;border-radius:10px;color:#a54042;padding:9px 12px}.tutorial-inner{text-align:center}.tutorial-inner h2{font-size:27px;color:var(--navy);margin:11px 0}.tutorial-inner p{text-align:left;line-height:1.5;color:var(--muted)}.tutorial-figures{display:flex;align-items:center;justify-content:center;gap:8px;margin:17px 0}.tutorial-figures>div{width:126px;background:#f0f5f4;border:1px solid #d1dfe0;border-radius:15px;padding:7px}.tutorial-figures>div>span{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.09em}.tutorial-figures svg{width:100px;height:100px}.tutorial-arrow{font-size:31px;color:var(--coral-dark)}.tutorial-inner .primary{width:100%;margin-top:10px}@media(max-width:700px){.hero{grid-template-columns:1fr}.hero-art{min-height:180px;max-width:390px;width:100%;margin:auto}.hero-art:before{width:180px;height:180px}.art-grid{grid-template-columns:repeat(3,37px);grid-template-rows:repeat(3,37px)}.section-head{margin-top:28px}}@media(max-width:540px){.shell{padding:0 12px}.site-head{height:60px}.brand{font-size:12px;letter-spacing:.06em}.brand-icon{font-size:19px}.brand i{font-size:10px}.back{font-size:12px}.home{padding-top:24px}.hero h1{font-size:clamp(35px,10vw,50px)}.hero-copy p{font-size:14px}.hero-art{min-height:148px;border-radius:24px}.art-grid{grid-template-columns:repeat(3,31px);grid-template-rows:repeat(3,31px)}.art-arrow{font-size:39px}.art-word{font-size:19px}.section-head{display:block}.section-head p{margin-top:5px}.modes{grid-template-columns:1fr;gap:9px}.mode{min-height:72px;padding:10px 14px}.mode b{font-size:16px}.mode small{font-size:12px}.mode-symbol{width:38px;height:38px;font-size:23px}.game{padding-top:14px}.stats{gap:5px}.stats span{font-size:11px;padding:5px 7px}.stats b{font-size:13px;margin-left:2px}.reference{min-height:184px}.model-figure svg{width:155px}.choice{height:136px}.choice .figure svg{width:112px}.choice-letter{width:28px;height:28px;top:9px;left:9px}.connector{padding:11px}.feedback{font-size:14px}.result{padding-top:44px}.tutorial-figures>div{width:111px}.tutorial-figures svg{width:92px;height:92px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}