*{box-sizing:border-box}html,body{margin:0;background:#000;color:#dedbd2;font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}body{min-height:100svh}button,input,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit;color:inherit;border:1px solid #45433f;background:#141413;border-radius:8px;min-height:44px;cursor:pointer;touch-action:manipulation}button:hover{background:#272622}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #e8d8b2;outline-offset:4px}button[aria-pressed=true]{color:#181611;background:#e5ddca;border-color:#e5ddca}#sand-app{max-width:1360px;margin:auto;padding:22px 40px 12px}.site-header{display:flex;align-items:center;gap:28px;padding-right:48px}.site-header>a{font-size:13px;text-decoration:none;color:#aaa79e}.site-header h1{font-size:24px;font-weight:500;letter-spacing:.02em;margin:0}.sand-layout{display:grid;grid-template-columns:minmax(0,1fr) 248px;align-items:center;gap:55px;min-height:calc(100svh - 130px)}.tray-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.tray{position:relative;width:min(100%,740px,calc(100svh - 190px));aspect-ratio:1}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;border-radius:50%}#hint{color:#a49e91;font-size:13px;text-align:center;line-height:1.6;margin:16px 0 0;max-width:34em}#sand-status{font-size:13px;text-align:center;margin:8px 0;color:#d9c7a5}#sand-status:empty{display:none}.controls{width:100%;align-self:center}.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}.tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;min-height:83px;font-size:14px}.tools svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.blade-controls,.secondary{display:grid;grid-template-columns:1fr 1fr;gap:8px}.blade-controls button,.secondary button{font-size:13px;padding:7px 4px}.speed-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#b7b1a5;margin-top:26px;gap:8px}.speed-label output{white-space:nowrap;color:#e5ddca}#speed{appearance:none;display:block;width:100%;height:32px;margin:7px 0 22px;background:transparent;cursor:pointer;touch-action:pan-y}#speed::-webkit-slider-runnable-track{height:3px;background:#5e584e;border-radius:3px}#speed::-webkit-slider-thumb{appearance:none;width:20px;height:20px;margin-top:-8.5px;border-radius:50%;background:#e5ddca;border:3px solid #000;box-shadow:0 0 0 1px #8d8370}#speed::-moz-range-track{height:3px;background:#5e584e}#speed::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#e5ddca;border:2px solid #000}.blade-hint{font-size:12px;line-height:1.65;color:#969083;text-align:center;margin:19px 0 0}.secondary #sound[aria-pressed=true]{background:#141413;color:#dedbd2;border-color:#45433f}#finger{position:absolute;pointer-events:none;transform:translate(-50%,-50%);width:30px;height:30px;border:1px solid #f1e2c58c;border-radius:50%;background:#f1e2c513}#blade-overlay{position:absolute;left:50%;top:50%;height:3px;width:92%;transform:translate(-50%,-50%) rotate(0rad);pointer-events:none;opacity:0;background:#242126;box-shadow:0 1px 0 #797078}#blade-overlay.is-lifted{opacity:1;clip-path:polygon(var(--cut-left) 0,var(--cut-right) 0,var(--cut-right) 100%,var(--cut-left) 100%);box-shadow:0 4px 2px #0008;border-top:1px solid #aaa19a}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;color:#736d62;font-size:11px;padding-top:8px}footer .legal-links{display:flex;gap:12px;font-size:11px}footer .legal-links a{color:inherit}.lang-switcher summary{background:#151513!important;color:#c2b9a6!important;border-color:#484238!important}.lang-switcher nav{background:#1c1b18!important;color:#e5ddca!important;border-color:#554d3d!important}.lang-switcher a:hover,.lang-switcher a:focus-visible,.lang-switcher a[aria-current=true]{background:#3d3629!important}
@media(max-width:700px){#sand-app{padding:18px 10px max(12px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column}.site-header{margin:0 10px;gap:20px;min-height:35px}.site-header h1{font-size:22px}.sand-layout{display:flex;flex:1;flex-direction:column;gap:0;min-height:0;justify-content:space-between}.tray-area{width:100%;flex:1;justify-content:center;padding:12px 0}.tray{width:min(100%,calc(100svh - 335px));min-width:min(100%,280px)}#hint{font-size:12px;margin-top:10px;padding:0 13px}.controls{width:100%;max-width:430px;padding:5px 12px 0;flex:0 0 auto}.tools{gap:10px;margin-bottom:13px}.tools button{min-height:69px;gap:4px;font-size:14px}.tools svg{width:27px;height:27px}.blade-controls button,.secondary button{min-height:41px}.speed-label{margin-top:15px;font-size:12px}#speed{margin:4px 0 11px;height:29px}.blade-hint{margin:10px 0 0;font-size:11px}footer{justify-content:center;padding-top:14px;font-size:10px}footer>span{display:none}footer .legal-links{font-size:10px;gap:18px}.lang-switcher{right:0!important}.lang-switcher summary{width:32px!important;height:32px!important}}
@media(max-height:710px) and (max-width:700px){#sand-app{padding-top:10px}.tray-area{padding:5px 0}.tools button{min-height:55px}.tools svg{width:23px;height:23px}.blade-hint{display:none}.speed-label{margin-top:8px}footer{padding-top:8px}.tray{min-width:240px;width:min(100%,calc(100svh - 295px))}}
/* Compact controls keep the sand and every action in one portrait viewport. */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:12px}.modes button{font-size:12px;line-height:1.15;padding:5px 3px;overflow-wrap:normal}.symmetry-controls{display:grid;grid-template-columns:auto minmax(60px,1fr) minmax(70px,1fr);gap:8px;align-items:center;margin-bottom:12px;font-size:12px}.symmetry-controls select{font:inherit;color:#dedbd2;background:#141413;border:1px solid #45433f;border-radius:8px;min-height:44px;padding:0 10px}.symmetry-controls button{font-size:12px}.controls .tools{margin-bottom:12px}.controls .speed-label{margin-top:15px}.controls #speed{margin-bottom:12px}#symmetry-guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;stroke:#eee1c6;stroke-width:2;stroke-opacity:.18;fill:none}#symmetry-guides[hidden]{display:none}#rim-handle{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);pointer-events:none;display:none;fill:none}.tray[data-mode=turntable] #rim-handle{display:block}.rim-outline{stroke:#615b4d;stroke-width:1;stroke-opacity:.55}.rim-touch{stroke:transparent;stroke-width:32;pointer-events:stroke;cursor:grab}.tray[data-mode=turntable]:active .rim-touch{cursor:grabbing}
@media(max-width:700px){#sand-app{padding:10px 10px max(10px,env(safe-area-inset-bottom));height:100svh;min-height:0}.site-header{min-height:31px;gap:14px;margin:0 9px}.site-header h1{font-size:20px}.site-header>a{font-size:12px}.sand-layout{justify-content:initial;gap:0}.tray-area{padding:6px 0 5px;flex:1;min-height:0}.tray{width:min(100%,calc(100svh - 425px));min-width:0;flex:0 0 auto}#hint{font-size:11px;line-height:1.4;margin:6px 0 0;max-width:100%;padding:0 8px}.controls{padding:4px 10px 0;max-width:430px}.modes{margin-bottom:8px}.modes button{min-height:44px;font-size:12px}.controls .tools{margin-bottom:8px;gap:8px}.tools button{min-height:54px;gap:2px;font-size:13px}.tools svg{width:23px;height:23px}.symmetry-controls{margin-bottom:8px;gap:8px;font-size:12px}.blade-controls button,.secondary button{min-height:44px;font-size:12px}.controls .speed-label{margin-top:8px;font-size:11px}.controls #speed{height:29px;margin:2px 0 8px}.blade-hint{display:none}footer{padding-top:9px;font-size:10px;flex:0 0 auto}footer .legal-links{gap:14px}#sand-status{margin:3px 0;font-size:11px}.lang-switcher{top:8px!important}}

.tray{touch-action:none}

button:disabled,#speed:disabled{opacity:.4;cursor:default}

/* Color sits with the tools; the sand remains the largest touch target. */
.tools{grid-template-columns:repeat(4,minmax(0,1fr))}.color-palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-bottom:8px}.color-palette[hidden]{display:none}.color-palette button{height:44px;min-width:0;padding:5px;background:#141413;border-color:transparent;display:grid;place-items:center}.color-palette button span{display:block;width:26px;height:26px;border-radius:50%;background:var(--sand-color);border:1px solid #ffffff38}.color-palette button[aria-pressed=true]{background:#2d2a24;border-color:#d9ceb5}.color-palette button[aria-pressed=true] span{outline:1px solid #eadfc6;outline-offset:3px}.secondary{grid-template-columns:repeat(3,minmax(0,1fr))}.base-choice{display:flex;flex-direction:column;justify-content:center;height:44px;text-align:center;font-size:10px;gap:1px;color:#b7b1a5}.base-choice select{color:#dedbd2;background:#141413;border:1px solid #45433f;border-radius:6px;width:100%;min-width:0;height:29px;font:inherit;font-size:11px;padding:0 3px}#sand-status{color:#b6ab95}
@media(max-width:700px){.tray-area:has(+.controls [data-tool=pour][aria-pressed=true]) .tray{width:min(100%,calc(100svh - 477px))}.color-palette{margin-bottom:8px}.tools button{font-size:12px}.base-choice{font-size:10px}.base-choice select{font-size:10px}.secondary button{font-size:11px}}
/* The fourth tool keeps long translated labels inside the existing sidebar. */
.tools [data-tool="pour"]{font-size:12px}
/* Plain-language controls: size and number of copies share one compact row. */
.controls .tools{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.tools button{font-size:12px;min-height:62px}.tools svg{width:24px;height:24px}.symmetry-controls{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1.65fr);gap:5px}.compact-choice{display:flex;flex-direction:column;gap:2px;text-align:center;font-size:10px;color:#b7b1a5;min-width:0}.compact-choice select{width:100%;min-width:0;min-height:30px;height:30px;padding:0 6px;font-size:12px}.symmetry-controls button{padding:3px 5px;line-height:1.25;font-size:11px}#copies-hint{margin:0 0 8px;font-size:11px;line-height:1.4;color:#a49e91}#copies-hint[hidden]{display:none}
@media(max-width:700px){.controls .tools button{min-height:50px;font-size:12px}.controls .tools svg{width:21px;height:21px}.tray{width:min(100%,calc(100svh - 446px))}.tray-area:has(+.controls [data-tool=pour][aria-pressed=true]) .tray{width:min(100%,calc(100svh - 490px))}.tray-area:has(+.controls #copies-hint:not([hidden])) .tray{width:min(100%,calc(100svh - 480px))}.tray-area:has(+.controls [data-tool=pour][aria-pressed=true]):has(+.controls #copies-hint:not([hidden])) .tray{width:min(100%,calc(100svh - 524px))}.controls .modes,.controls .tools,.symmetry-controls{margin-bottom:6px}.color-palette{margin-bottom:6px}#copies-hint{font-size:10px;margin-bottom:6px}.symmetry-controls select{min-height:31px}.blade-controls button{line-height:1.2}.speed-label output{font-size:10px}.controls .speed-label{margin-top:6px}.controls #speed{margin-bottom:6px}footer{padding-top:6px}}

/* Reserve room for the pour-only explanation without changing tool controls. */
#palette-hint{font-size:11px;line-height:1.4;color:#a49e91;margin:0 0 8px}#palette-hint[hidden]{display:none}.color-palette:has(+ #palette-hint:not([hidden])){margin-bottom:0}
@media(max-width:700px){#palette-hint{font-size:10.5px;margin-bottom:6px}.tray-area:has(+.controls [data-tool=pour][aria-pressed=true]) .tray{width:min(100%,calc(100svh - 544px))}.tray-area:has(+.controls [data-tool=pour][aria-pressed=true]):has(+.controls #copies-hint:not([hidden])) .tray{width:min(100%,calc(100svh - 578px))}}

/* Explicit fold state uses the same pressed treatment as the mode buttons. */
#mirror{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}#mirror-icon{width:36px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}#mirror-label{white-space:normal}#motion-status{font-size:11px;line-height:1.4;color:#b7b1a5;margin:4px 0 0}#motion-status[hidden]{display:none}
@media(max-width:700px){.tray-area .tray{width:min(100%,var(--tray-room,300px))!important}#copies-hint{font-size:10.5px;line-height:1.4}.symmetry-controls{align-items:end}#mirror{min-height:49px}#hint{flex:0 0 auto}}

/* Standard tray and full-screen controls. */
#sand-app{--tray-height-reserve:190px}
.fullscreen-controls{display:grid;margin-bottom:12px}.fullscreen-controls button{font-size:12px;padding:6px}
#fullscreen-exit[hidden],#controls-toggle[hidden]{display:none}.is-fullscreen #sand-app{position:fixed;inset:0;max-width:none;padding:0;height:100svh;width:100vw;background:#000;z-index:100}.is-fullscreen .site-header,.is-fullscreen footer,.is-fullscreen #hint,.is-fullscreen #motion-status{display:none}.is-fullscreen .sand-layout{display:block;min-height:0;height:100%}.is-fullscreen .tray-area{height:100%;padding:0}.is-fullscreen .tray-area .tray{width:min(100svh,100vw)!important;min-width:0}.is-fullscreen .controls{display:none;position:fixed;right:14px;top:66px;bottom:14px;width:290px;max-width:calc(100vw - 28px);align-self:auto;padding:12px;background:#12110fed;border:1px solid #45433f;border-radius:12px;overflow:auto;z-index:103}.is-fullscreen.controls-open .controls{display:block}.is-fullscreen #fullscreen-exit,.is-fullscreen #controls-toggle{position:fixed;top:12px;z-index:104;min-height:44px;padding:8px 14px;background:#141413e8;font-size:13px}.is-fullscreen #fullscreen-exit{left:14px}.is-fullscreen #controls-toggle{right:14px}
@media(max-width:700px){.fullscreen-controls{margin-bottom:6px}.fullscreen-controls button{min-height:44px}.is-fullscreen .controls{width:280px;max-height:calc(100svh - 80px)}}

.is-fullscreen #fullscreen-exit,.is-fullscreen #controls-toggle{max-width:calc(50vw - 24px);white-space:normal}

@media(min-width:701px){#sand-app:has(#motion-status:not([hidden])) .tray{width:min(100%,740px,calc(100svh - var(--tray-height-reserve) - 26px))}}

@media(max-width:700px){.tray-area{position:relative}#motion-status{position:absolute;left:0;right:0;bottom:18px;margin:0;pointer-events:none}}

/* Static instructions stay below the unchanged game viewport. */
.sand-about{max-width:780px;margin:28px auto 48px;padding:0 22px;color:#b7b1a5;font-size:14px;line-height:1.75}.sand-about h2{color:#dedbd2;font-size:18px;font-weight:600}.is-fullscreen .sand-about{display:none}

footer .footer-credits{order:-1}@media(max-width:700px){footer .footer-credits{display:none}}

/* The picker follows the eight familiar colors; recents use one compact row. */
#color-palette{grid-template-columns:repeat(9,minmax(0,1fr))}.color-palette button{padding:2px}.color-palette button span{width:min(26px,100%);aspect-ratio:1;height:auto}#add-color{font-size:25px;line-height:1}#custom-color{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:0;top:0}.recent-colors{grid-template-columns:repeat(8,minmax(0,1fr));margin-bottom:4px}#color-limit-hint{font-size:11px;line-height:1.4;color:#d9c7a5;margin:3px 0 6px}#color-limit-hint:empty,#color-limit-hint[hidden]{display:none}