:root{color-scheme:dark;--bg:#0a1020;--panel:#121c33;--panel2:#172440;--border:#293a58;--ink:#eff5ff;--muted:#a9b9d3;--cyan:#56e7e3;--gold:#f5c36b;--purple:#b29aff;--green:#73e9ac;--red:#ff829b;--radius:18px;font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;color:var(--ink);background:radial-gradient(ellipse 62% 23% at 20% 1%,#23345688,transparent),radial-gradient(ellipse 40% 35% at 95% 70%,#19324844,transparent),var(--bg);min-height:100vh;line-height:1.55}button{font:inherit}button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.43;cursor:not-allowed}button:not(:disabled){cursor:pointer}.app-frame{min-height:100vh;display:flex;flex-direction:column;max-width:1220px;margin:0 auto;padding:0 28px}.topbar{height:90px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #2a3954}.brand{border:0;background:none;color:var(--ink);display:flex;align-items:center;gap:11px;padding:0;text-align:left}.brand-symbol{height:43px;width:43px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#2be6dd,#757fff);box-shadow:0 7px 24px #40ddf224}.brand-symbol svg{width:31px;fill:none;stroke:#102137;stroke-width:3;stroke-linejoin:round}.brand-text{font-weight:900;line-height:1;letter-spacing:.055em;font-size:22px}.brand-text>span{color:var(--cyan)}.brand-text small{font-size:10px;color:var(--muted);display:block;letter-spacing:.10em;font-weight:700;margin-top:7px}.top-actions{display:flex;gap:11px;align-items:center}.total-badge{border:1px solid #45607a;background:#14253c;color:#cbdff7;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:800;white-space:nowrap}.icon-btn{border:1px solid var(--border);background:#1b2a43;color:var(--ink);border-radius:12px;height:39px;width:39px;font-size:21px;font-weight:bold}.icon-btn:hover,.secondary-btn:hover{border-color:#75b6ca;background:#213754}main{flex:1}.footer{display:flex;justify-content:space-between;gap:20px;margin-top:45px;padding:24px 0 28px;color:#7185a9;font-size:11px;letter-spacing:.08em;border-top:1px solid #223149}.loading{text-align:center;padding:80px;color:var(--muted)}.eyebrow{color:var(--cyan);letter-spacing:.23em;font-weight:850;font-size:11px}.hero{padding:65px 0 34px;display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:36px}.hero h1{font-size:clamp(34px,4.2vw,62px);line-height:1.24;letter-spacing:-.045em;margin:13px 0 15px;font-weight:950}.hero h1 em{font-style:normal;color:var(--cyan)}.hero p{color:var(--muted);font-size:clamp(13px,1.3vw,16px);max-width:600px}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:23px}.chip{font-size:12px;font-weight:700;padding:7px 12px;color:#bed4ee;border:1px solid #314563;border-radius:99px;background:#111d31}.hero-art{min-height:285px;position:relative;display:grid;place-items:center;isolation:isolate}.hero-art:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:#42dde936;filter:blur(60px);z-index:-1}.hero-art svg{width:min(100%,400px);filter:drop-shadow(0 17px 20px #0007);animation:float 6s ease-in-out infinite}@keyframes float{50%{transform:translateY(-9px)}}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:18px 0}.section-heading h2{font-size:22px;margin:0;letter-spacing:-.03em}.section-heading p{color:var(--muted);font-size:13px;margin:4px 0 0}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.mode-card{border:1px solid var(--border);border-radius:22px;background:linear-gradient(155deg,#1d2a46,#101a30);padding:22px;display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;text-align:left;transition:transform .18s,border-color .18s,box-shadow .18s;color:var(--ink);min-height:305px}.mode-card:hover{transform:translateY(-4px);border-color:#6486ae;box-shadow:0 18px 36px #05091670}.mode-card[data-mode="pack"]{--accent:var(--cyan)}.mode-card[data-mode="laser"]{--accent:var(--gold)}.mode-card[data-mode="line"]{--accent:var(--purple)}.mode-card:before{position:absolute;right:-40px;top:-30px;content:"";width:150px;height:150px;background:var(--accent);opacity:.09;filter:blur(32px);border-radius:50%}.card-kicker{font-size:11px;letter-spacing:.15em;color:var(--accent);font-weight:900}.card-art{height:113px;display:grid;place-items:center;margin:9px 0}.card-art svg{height:107px;max-width:100%}.mode-card h3{font-size:22px;margin:3px 0}.mode-card p{color:var(--muted);font-size:13px;margin:0 0 15px;flex:1}.card-bottom{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:750;color:#c9dafa}.card-bottom .arrow{display:grid;place-items:center;border-radius:99px;background:var(--accent);color:#0e1d2e;width:31px;height:31px;font-size:18px}.bar{height:6px;background:#283955;border-radius:99px;overflow:hidden;margin-top:14px}.bar span{height:100%;display:block;border-radius:99px;background:var(--accent)}.tip-banner{margin-top:23px;display:flex;gap:14px;align-items:center;border:1px solid #335168;background:#142b3a88;border-radius:17px;padding:16px 20px;color:#c6d9ed;font-size:13px}.tip-banner strong{color:var(--cyan)}.tip-icon{font-size:22px}.page-top{padding:35px 0 16px}.back-link{background:none;color:#a8c5e4;border:0;padding:8px 0;font-weight:700;font-size:13px}.back-link:hover{color:var(--cyan)}.page-top h1{font-size:clamp(27px,4vw,40px);margin:7px 0 4px}.page-top p{color:var(--muted);margin:0;font-size:14px}.level-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:22px 0}.level-btn{text-align:left;background:linear-gradient(145deg,#182741,#101a2e);color:var(--ink);border:1px solid #364762;border-radius:17px;padding:16px;min-height:125px;display:flex;flex-direction:column;gap:8px}.level-btn:hover{border-color:var(--cyan);background:#213754}.level-btn.done{border-color:#377c70;background:linear-gradient(135deg,#153a3b,#14233a)}.level-number{font-size:30px;font-weight:950;line-height:1;color:#deeafb}.level-btn.done .level-number{color:var(--green)}.level-title{font-weight:850;font-size:12px}.level-state{margin-top:auto;font-size:11px;color:var(--muted)}.level-btn.done .level-state{color:var(--green)}.game-top{padding:27px 0 18px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap}.game-title{display:flex;align-items:center;gap:12px}.game-icon{font-size:24px;width:52px;height:52px;display:grid;place-items:center;background:#20314e;border:1px solid #364c70;border-radius:15px}.game-title h1{margin:0;font-size:23px}.game-title p{margin:0;font-size:12px;color:var(--muted)}.level-navigation{display:flex;gap:8px}.secondary-btn,.primary-btn,.subtle-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-weight:800;transition:transform .12s,background .12s,border-color .12s}.secondary-btn{color:#d4e7ff;background:#192740;border:1px solid #3a4c6c;padding:11px 14px;font-size:13px}.primary-btn{border:0;background:linear-gradient(135deg,#53e9dd,#83b3ff);color:#10213b;padding:12px 17px;box-shadow:0 7px 22px #37dfe320;font-size:13px}.primary-btn:hover{filter:brightness(1.09);transform:translateY(-1px)}.subtle-btn{color:#b7cbe7;background:transparent;border:1px solid transparent;padding:10px 12px;font-size:12px}.subtle-btn:hover{background:#243552}.game-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:18px;align-items:start}.workspace,.side-panel{background:linear-gradient(160deg,#17243d,#10192c);border:1px solid var(--border);border-radius:23px;min-width:0}.workspace{padding:20px;position:relative;overflow:hidden}.side-panel{padding:21px}.panel-label{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;letter-spacing:.07em;color:#9cb2d0;font-weight:800}.panel-heading{font-size:20px;font-weight:900;margin:11px 0 6px}.panel-copy{font-size:13px;color:var(--muted);margin:0 0 16px}.side-heading{font-size:14px;font-weight:900;margin:0 0 12px}.steps{display:flex;flex-direction:column;gap:11px}.step{display:flex;gap:10px;color:#b7c8df;font-size:13px;align-items:start}.step-num{border:1px solid #3b5574;color:var(--cyan);flex:0 0 24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:bold}.separator{border:0;height:1px;background:#2a3b57;margin:19px 0}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.actions>*{flex:1}.help-box{margin-top:16px;background:#152a3d;border:1px solid #2d5862;padding:13px;border-radius:13px;color:#d3ecf4;font-size:12px}.feedback{margin-top:14px;padding:12px;border-radius:13px;border:1px solid #354c6b;color:#c6d8ef;background:#1b2b45;font-size:12px;min-height:44px}.feedback.error{border-color:#714156;color:#ffd1dc}.feedback.good{border-color:#387c69;color:#b0f4d3}.progress-mini{margin-top:14px;height:7px;background:#273850;border-radius:20px;overflow:hidden}.progress-mini span{display:block;height:100%;background:linear-gradient(90deg,#36cabb,#8eb5ff);border-radius:20px}.stat-row{display:flex;justify-content:space-between;gap:8px;margin-top:11px;color:#aec0d8;font-size:12px}.stat-row strong{color:var(--ink)}.tiny-note{font-size:11px;color:#879ebd}.board-panel{display:flex;justify-content:center;margin:13px auto 3px}.pack-board{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:4px;width:min(100%,460px);padding:8px;background:#0b1527;border:2px solid #3b5270;border-radius:16px;aspect-ratio:var(--board-w) / var(--board-h);user-select:none}.pack-cell{position:relative;border:1px solid #38506b;border-radius:6px;background:#202f48;display:grid;place-items:center;min-width:0;min-height:0;touch-action:manipulation;transition:background .1s,border .1s;padding:0;color:#102032}.pack-cell:hover{border-color:#f1f5ff}.pack-cell.occupied{background:var(--piece-color);border-color:color-mix(in srgb,var(--piece-color),#fff 27%);box-shadow:inset 0 -5px 0 #0002}.pack-cell.occupied.selected{box-shadow:inset 0 0 0 2px #fff9,inset 0 -5px 0 #0002}.pack-cell.preview-ok{box-shadow:inset 0 0 0 2px var(--cyan)}.pack-cell.preview-bad{box-shadow:inset 0 0 0 2px var(--red)}.pack-cell.preview-ok:not(.occupied){background:#28576a}.cell-dot{height:3px;width:3px;background:#426282;border-radius:100%}.piece-tray{display:grid;grid-template-columns:repeat(auto-fit,minmax(83px,1fr));gap:9px}.piece-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:13px;min-height:93px;background:#142238;border:1px solid #344760;color:#bdcee9;padding:8px}.piece-btn:hover,.piece-btn.selected{border-color:var(--cyan);background:#1c3a4d}.piece-btn.placed{opacity:.63}.piece-btn.selected{outline:1px solid var(--cyan)}.piece-label{font-size:11px;font-weight:850}.piece-figure{display:grid;grid-template-columns:repeat(var(--cols),15px);grid-template-rows:repeat(var(--rows),15px);gap:2px}.piece-square{background:var(--piece-color);border-radius:3px;box-shadow:inset 0 -3px 0 #0002}.piece-blank{background:transparent}.pack-control{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}.pack-control button{min-width:118px}.laser-board,.line-board{display:block;width:min(100%,540px);margin:14px auto;aspect-ratio:1/1;overflow:visible;touch-action:manipulation}.laser-board{max-height:520px}.laser-cell{fill:#1c2a42;stroke:#304661;stroke-width:1}.laser-grid-border{fill:none;stroke:#50708e;stroke-width:2.5;rx:8}.laser-mirror{cursor:pointer;outline:none}.laser-mirror rect{fill:#233d56;stroke:#5e8da9;stroke-width:2;rx:8}.laser-mirror:hover rect,.laser-mirror:focus-visible rect{fill:#365c75;stroke:var(--cyan)}.laser-mirror path{stroke:#ecfcff;stroke-linecap:round;stroke-width:4}.laser-mirror.highlight rect{stroke:#ffd47e;stroke-width:3.5;filter:drop-shadow(0 0 7px #e4ae52)}.laser-path-glow{fill:none;stroke:#f9c66d;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;opacity:.23;filter:blur(4px)}.laser-path{fill:none;stroke:#ffe090;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 5px #ffd17f)}.endpoint-label{font-size:9px;fill:#bed3eb;font-weight:900;letter-spacing:1px}.line-board{max-height:410px;aspect-ratio:560/420;background:radial-gradient(circle at 50% 45%,#1c345288,#111d3100 69%);border-radius:15px}.graph-line{stroke:#6c85a6;stroke-width:7;stroke-linecap:round;opacity:.65}.graph-line.used{stroke:var(--cyan);stroke-width:9;opacity:1;filter:drop-shadow(0 0 5px #4bfbeb90)}.graph-node{cursor:pointer;outline:0}.graph-node circle{fill:#263e5a;stroke:#bcd5ef;stroke-width:3}.graph-node text{fill:#fff;font-size:17px;text-anchor:middle;dominant-baseline:central;font-weight:900;pointer-events:none}.graph-node:hover circle,.graph-node:focus-visible circle{stroke:#fff;fill:#446582}.graph-node.current circle{fill:#148a92;stroke:#bcfff3;filter:drop-shadow(0 0 8px #46e6e2)}.graph-node.hint circle{stroke:#ffdb82;stroke-width:5;filter:drop-shadow(0 0 6px #ffd884)}.graph-node.done circle{fill:#275b68}.graph-node circle.hit{fill:transparent;stroke:none}.win-card{border:1px solid #42b59e;border-radius:17px;background:linear-gradient(135deg,#174a4d,#182947);padding:21px;margin-top:17px;position:relative;overflow:hidden}.win-card:before{content:"✦";position:absolute;right:20px;top:-18px;font-size:100px;color:#74f3cf18}.win-top{font-size:13px;color:var(--green);font-weight:900;letter-spacing:.12em}.win-card h2{font-size:27px;margin:5px 0 8px}.win-card p{color:#c3e4df;font-size:13px;margin:0 0 12px}.stars{font-size:28px;letter-spacing:4px;color:var(--gold);margin-bottom:14px}.win-actions{display:flex;flex-wrap:wrap;gap:9px}.win-actions button{flex:1}.shortcut{color:#7593b4;font-size:11px;text-align:center;margin-top:14px}.support-mobile{display:none}
@media(max-width:880px){.hero{gap:10px;grid-template-columns:1fr .6fr}.hero-art{min-height:190px}.mode-grid{gap:11px}.mode-card{padding:16px;min-height:310px}.mode-card h3{font-size:19px}.level-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.game-layout{grid-template-columns:minmax(0,1fr)}.side-panel{order:2}.workspace{order:1}.piece-tray{grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}.game-top{align-items:flex-start}}
@media(max-width:620px){.app-frame{padding:0 13px}.topbar{height:72px}.brand-symbol{width:37px;height:37px}.brand-text{font-size:18px}.brand-text small{font-size:9px}.total-badge{font-size:10px;padding:7px 9px}.hero{padding:39px 0 19px;grid-template-columns:1fr}.hero h1{font-size:clamp(34px,9vw,46px)}.hero-art{display:none}.hero p{font-size:13px}.chips{margin-top:15px}.mode-grid{grid-template-columns:1fr;gap:12px}.mode-card{min-height:auto;display:grid;grid-template-columns:105px 1fr;grid-template-rows:auto auto auto 1fr auto;column-gap:16px;padding:15px}.mode-card .card-kicker{grid-column:2;grid-row:1}.mode-card .card-art{grid-column:1;grid-row:1/6;height:123px;margin:0}.mode-card .card-art svg{height:101px}.mode-card h3{grid-column:2;grid-row:2;font-size:20px;margin:0}.mode-card p{grid-column:2;grid-row:3;margin:4px 0;font-size:12px}.mode-card .card-bottom{grid-column:2;grid-row:4}.mode-card .bar{grid-column:1/3;grid-row:5;margin-top:9px}.tip-banner{padding:12px}.level-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.level-btn{min-height:112px;padding:12px}.game-top{padding:18px 0 12px}.game-title h1{font-size:19px}.game-icon{height:44px;width:44px;font-size:21px}.game-layout{gap:12px}.workspace{padding:12px;border-radius:18px}.side-panel{padding:16px;border-radius:18px}.pack-board{gap:3px;padding:5px;border-radius:11px}.pack-cell{border-radius:4px}.pack-control button{min-width:93px;padding:10px}.footer{margin-top:27px;flex-direction:column;gap:4px}.page-top h1{font-size:30px}.level-navigation{width:100%}.level-navigation button{flex:1}.laser-board{margin:4px auto}.support-mobile{display:block}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}