*{box-sizing:border-box} :root{--ink:#234b42;--muted:#738b80;--accent:#387c64;--line:#dce8de}body{margin:0;background:radial-gradient(ellipse at 8% 10%,#d9eedf,transparent 45%),radial-gradient(ellipse at 95% 80%,#fae7d8,transparent 50%),#f2f5ed;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;min-height:100svh}button,input,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;touch-action:manipulation}button:focus-visible,summary:focus-visible{outline:3px solid #e9a345;outline-offset:3px}button:disabled{opacity:.42;cursor:default}.app{max-width:472px;padding:22px 18px max(18px,env(safe-area-inset-bottom));margin:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}.brand{display:flex;gap:10px;align-items:center;font-size:23px;font-weight:850;letter-spacing:2px}.brand small{display:block;font-size:8px;letter-spacing:2.3px;font-weight:650;margin-top:3px;color:var(--muted)}.brand-icon{display:grid;place-items:center;width:42px;height:42px;background:#397c63;color:#f7fff0;border-radius:13px;font-size:31px;box-shadow:0 4px 0 #286048}.badge{font-size:10px;letter-spacing:.7px;padding:7px 9px;border:1px solid #cfdfd1;border-radius:20px;background:#ffffff55;color:#678072}nav{display:flex;gap:7px}nav button{flex:1;padding:10px 3px;background:#ffffff65;border:1px solid #dde6d9;border-radius:12px;font-size:12px;color:var(--muted)}nav button.active{background:var(--ink);color:white;border-color:var(--ink);box-shadow:0 3px 8px #234b4218}.intro{display:flex;justify-content:space-between;align-items:center;padding:19px 1px 15px}.eyebrow{font-size:9px;letter-spacing:2px;color:#7e998b;margin:0 0 7px;font-weight:700}h1{font-size:25px;letter-spacing:1px;margin:0 0 6px;line-height:1.2}#subtitle{font-size:12px;color:var(--muted);margin:0}.target-wrap{text-align:center;font-size:9px;color:#789184;flex-shrink:0}.target-wrap span{display:block;margin-top:4px;letter-spacing:1px}#mini{display:grid;width:57px;height:57px;gap:1px;padding:4px;border-radius:9px;background:#ffffffe0;box-shadow:0 2px 7px #20472a0c}#mini i{border-radius:1px}.meter{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px;color:var(--muted)}.meter strong{font-size:15px;color:var(--ink);margin-left:5px}.meter b{color:var(--ink);font-weight:650}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#65a87b;margin-right:4px}.progress-track{height:5px;border-radius:5px;background:#dae5d7;margin-bottom:15px;overflow:hidden}#progress-bar{height:100%;border-radius:5px;background:linear-gradient(90deg,#76ae8e,#3b8368);transition:width .35s}.board-shell{padding:11px;border:1px solid #fff;background:#fffef9;border-radius:21px;box-shadow:0 13px 28px #22483510,0 3px 0 #d5dfcf;position:relative}#board{display:grid;gap:3px;border-radius:11px;background:#e3e7d6;padding:6px;aspect-ratio:1;touch-action:manipulation;user-select:none}.cell{position:relative;min-width:0;min-height:0;padding:2px;border-radius:22%;display:flex;align-items:center;justify-content:center;background:var(--base);box-shadow:inset 0 1px 2px #213b2628;aspect-ratio:1}.bead{display:block;width:88%;height:88%;border-radius:50%;background:radial-gradient(circle at 31% 23%,#ffffffa8 0,#ffffff22 24%,transparent 48%),var(--stone);box-shadow:inset 0 -3px 3px #0000001f,inset 0 1px 1px #ffffffb0,0 2px 2px #112e3033;pointer-events:none;position:relative;transition:transform .14s}.cell:hover .bead{transform:translateY(-1px)}.cell.correct .bead:after{content:"";position:absolute;right:18%;bottom:18%;width:12%;height:12%;background:#fff;border-radius:50%;box-shadow:0 1px 2px #0002}.cell.empty:after{content:"";width:60%;height:60%;border-radius:50%;border:1.5px dashed #ffffffd9;box-shadow:inset 0 2px 3px #233b3217}.cell.hinted{outline:3px solid #e9a345;outline-offset:0;z-index:1;animation:hintPulse 1s infinite}.cell.destination{outline:2px solid #fff;outline-offset:-2px}.cell.arrived .bead{animation:land .33s ease-out}#board[data-peek=true] .bead{opacity:0}#board[data-peek=true] .cell{box-shadow:none}.legend{display:flex;align-items:center;gap:13px;color:#789082;font-size:10px;padding:12px 1px}.legend span{display:flex;align-items:center;gap:4px}.legend-ring{width:10px;height:10px;border-radius:3px;background:#acd7bd;border:1px solid #7aa38c}.legend-dot{width:9px;height:9px;border-radius:50%;background:#609b7a;box-shadow:inset 0 0 0 3px #609b7a}.legend-dot:after{content:"";display:block;background:white;width:3px;height:3px;border-radius:50%;margin:3px}.legend button{margin-left:auto;padding:6px 10px;border-radius:9px;background:#e4ebde;font-size:10px}.legend button[aria-pressed=true]{background:#3e7e65;color:#fff}.tray-card{background:#ffffffa6;border:1px solid #fff;border-radius:18px;padding:13px 16px;box-shadow:0 4px 14px #1c4c3710}.tray-heading{display:flex;align-items:center;justify-content:space-between}h2{font-size:13px;margin:0}h2 small{font-size:10px;font-weight:500;color:var(--muted);margin-left:5px}.tray-heading p{font-size:10px;color:var(--muted);margin:4px 0 0}.toggle{display:flex;align-items:center;gap:6px;position:relative;cursor:pointer}.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}.toggle span{width:28px;height:17px;border-radius:10px;background:#b5c4b4;position:relative}.toggle span:after{content:"";position:absolute;width:11px;height:11px;top:3px;left:3px;border-radius:50%;background:white;transition:left .2s}.toggle input:checked+span{background:#548e70}.toggle input:checked+span:after{left:14px}.toggle input:focus-visible+span{outline:2px solid #e9a345}.toggle b{font-size:10px;font-weight:500}#tray{display:flex;gap:12px;justify-content:center;padding-top:11px}.slot{width:46px;height:46px;display:grid;place-items:center;background:#e5eadf;border:2px solid #d5dfcf;border-radius:12px;position:relative}.slot .bead{width:31px;height:31px}.slot.selected{border-color:#e5a445;background:#f9ecd2;box-shadow:0 0 0 2px #e5a44538}.slot .number{color:#acbba8;font-size:12px}.slot.hinted{outline:2px solid #e9a345}#message{font-size:11px;color:#62806c;text-align:center;min-height:32px;line-height:1.5;margin:10px 0 6px;padding:0 4px}.actions{display:flex;gap:9px}.actions button{flex:1;padding:10px 2px;border:1px solid #d6e0d2;border-radius:12px;background:#ffffffb0;font-size:12px;box-shadow:0 2px 0 #dce3d4}.actions button span{font-size:19px;vertical-align:-1px;margin-right:4px}#hint{background:#407d63;color:white;border-color:#407d63;box-shadow:0 2px 0 #2d5f49}details{font-size:11px;color:var(--muted);margin-top:19px;line-height:1.9}summary{cursor:pointer;font-size:10px;text-align:center}details ol{padding-left:19px}details p{font-size:10px}footer{margin-top:14px;text-align:center;font-size:10px;letter-spacing:1px;color:#8da18e}footer span{display:block;font-size:8px;letter-spacing:1.6px;margin-top:6px}#victory{position:absolute;inset:14%;z-index:4;border-radius:22px;background:#fffdf4f2;backdrop-filter:blur(8px);box-shadow:0 12px 40px #29452c20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px;border:1px solid #fff}#victory[hidden]{display:none}.win-mark{font-size:50px;color:#c7a050;line-height:1.3}#victory h2{font-size:18px}#victory p{font-size:11px;color:var(--muted);margin:12px 0 20px}#next{padding:12px 17px;background:#3e7e65;color:white;border-radius:13px;font-size:12px}#particles{position:fixed;inset:0;pointer-events:none;z-index:20}.fly{position:fixed;display:block;border-radius:50%;box-shadow:inset 0 2px 3px #fff9,0 3px 5px #0002;background:var(--stone);pointer-events:none}@keyframes hintPulse{50%{outline-color:#f8d897}}@keyframes land{0%{transform:scale(.7)}65%{transform:scale(1.13)}100%{transform:scale(1)}}@media(min-width:800px){.app{margin:32px auto;padding:26px 26px 24px;background:#f8faf1c4;border:1px solid #ffffffcf;border-radius:32px;box-shadow:0 30px 90px #294b3020}body:before{content:"COLOR / ORDER / CALM";position:fixed;left:35px;top:45%;writing-mode:vertical-rl;letter-spacing:5px;font-size:10px;color:#a4b7a7}}@media(max-width:360px){.app{padding:14px 12px}header{margin-bottom:14px}.badge{font-size:9px}.board-shell{padding:8px}#board{gap:2px}.legend{gap:8px}}@media(max-width:799px) and (min-height:650px){.app{padding-top:12px}header{margin-bottom:12px}nav button{padding:8px 3px}.intro{padding:12px 1px 10px}.progress-track{margin-bottom:10px}.board-shell{padding:8px;width:min(100%,calc(100svh - 455px));margin-inline:auto}.legend{padding-block:8px}.tray-card{padding:10px 16px}.slot{width:42px;height:42px}#message{min-height:28px;margin-top:8px}.actions button{padding:8px 2px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}