:root{color-scheme:dark;--bg:#070b10;--ink:#dfe9e7;--muted:#768e91;--line:#a7ccd522;--accent:#c6ef98;font:12px/1.5 Arial,"PingFang TC","Microsoft JhengHei",sans-serif}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);display:grid;grid-template-rows:98px minmax(0,1fr) 88px}button,select,input{font:inherit;color:inherit}button,a{touch-action:manipulation}button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 12px;background:none;border:1px solid transparent;color:#a9bec0;cursor:pointer;border-radius:4px;transition:color .2s,background .2s,border-color .2s}button:hover{color:var(--accent);background:#c6ef9809}button:disabled{opacity:.3;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.icon{width:17px;height:17px;flex-shrink:0}header{display:flex;align-items:center;gap:30px;margin:0 32px;border-bottom:1px solid var(--line);z-index:5}.back{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font:13px var(--display);padding-right:28px;border-right:1px solid var(--line)}.identity p{font:8px monospace;letter-spacing:1.8px;color:var(--muted);margin:0 0 8px}h1{font:clamp(15px,2vw,22px)/1.4 var(--display);margin:0;font-weight:400}nav{margin-left:auto;display:flex;gap:8px}main{position:relative;min-height:0;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}#particles{touch-action:none;cursor:crosshair}#field{pointer-events:none}.coordinates{position:absolute;top:22px;left:32px;right:32px;display:flex;justify-content:space-between;font:8px monospace;letter-spacing:1.8px;color:#547079;pointer-events:none}.coordinates b{font-weight:400;color:#a2bbad}#invitation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:480px;max-width:calc(100% - 170px);pointer-events:none;transition:opacity .7s}#invitation .eyebrow{font:8px monospace;letter-spacing:3px;color:var(--accent);margin:0 0 22px}#invitation h2{font:clamp(23px,3.3vw,42px)/1.65 var(--display);font-weight:400;margin:0 0 22px;color:#b7c9cb}#invitation p:not(.eyebrow){font-size:12px;line-height:2.1;letter-spacing:1.6px;color:#698388}#invitation>span{display:block;margin-top:32px;font:8px monospace;letter-spacing:2px;color:#405b62}body.has-ink #invitation,body.revealed #invitation{opacity:0}.tools{position:absolute;left:30px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;padding:7px;border:1px solid var(--line);background:#0d151ac9;backdrop-filter:blur(14px);border-radius:6px}.tools button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;text-align:left;font-size:11px;min-height:55px;justify-content:start}.tools button>span{font:8px monospace;color:#55717b;grid-row:1/3}.tools small{font:7px monospace;letter-spacing:1.5px;color:#59757d}.tools [aria-pressed=true]{border-color:#c6ef9833;background:#c6ef9808;color:var(--accent)}.tools #undo{display:flex;justify-content:center;min-height:35px;margin-top:7px;border-top:1px solid var(--line)}body.revealed .tools{opacity:.45}.bottom-notes{position:absolute;bottom:20px;left:32px;right:32px;display:flex;justify-content:space-between;gap:16px;font:9px monospace;letter-spacing:1.2px;color:#789699;pointer-events:none}#hint{font:10px Arial;color:#46636c}footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:0 32px;border-top:1px solid var(--line);z-index:5}.secondary{display:flex;gap:8px}.secondary button{font-size:11px}.result-tools{justify-self:end;display:flex;gap:4px}.result-tools button{font-size:11px}.result-tools [aria-pressed=true]{color:var(--accent)}button.reveal{border:1px solid #b6d38e65;color:var(--accent);min-width:228px;height:51px;border-radius:0;display:flex;gap:18px;background:#c6ef9807}button.reveal:not(:disabled):hover{background:var(--accent);color:#122016;box-shadow:0 0 45px #b6ed7c18}button.reveal>span{font:12px var(--display);letter-spacing:1px}button.reveal>small{font-size:10px;font-weight:400;letter-spacing:1px}#controls{position:absolute;right:26px;top:18px;width:250px;max-height:calc(100% - 70px);overflow:auto;padding:22px;background:#10191ff5;border:1px solid var(--line);border-radius:5px;backdrop-filter:blur(18px);z-index:4}#controls h2{font:9px monospace;letter-spacing:2px;color:var(--accent);margin:0 0 24px}#controls label{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:11px;gap:12px;margin-bottom:22px}output{font:10px monospace;color:#c1dcc5}input[type=range]{width:100%;grid-column:1/-1;accent-color:var(--accent);height:3px;margin:2px 0 0}#controls .select-label{display:flex;justify-content:space-between}select{max-width:150px;border:1px solid var(--line);background:#17252a url('/assets/select-chevron.svg') no-repeat right 7px center/10px;appearance:none;border-radius:3px;padding:7px 22px 7px 8px;font-size:10px}.files{display:flex;border-top:1px solid var(--line);padding-top:12px}.files button{font-size:10px;padding:7px 5px}#controls p{font-size:9px;color:var(--muted);line-height:1.9;margin-bottom:0}#status{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:20;background:#152420f5;border:1px solid var(--line);padding:10px 15px;max-width:90vw;font-size:11px;margin:0;pointer-events:none}#status:empty{display:none}dialog{width:min(550px,calc(100vw - 30px));max-height:85dvh;background:#101a20;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:28px}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-title{display:flex;align-items:start;justify-content:space-between;gap:15px}.dialog-title p{font:15px/1.8 var(--display);color:var(--accent);margin:0 0 20px}dialog>p{font-size:12px;color:#a5bcbe;line-height:2;margin:12px 0}dialog .fine{font-size:10px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}[hidden]{display:none!important}
@media(max-width:760px){body{grid-template-rows:90px minmax(0,1fr) 126px}header{margin:0 18px;gap:14px}.back{font-size:10px;padding-right:12px;gap:7px}.back .icon{display:none}.identity p{font-size:6px;letter-spacing:.8px}h1{font-size:14px}nav{gap:0}nav button{padding:6px;font-size:10px}nav .icon{width:15px;height:15px}.tools{top:auto;bottom:48px;left:50%;transform:translateX(-50%);flex-direction:row;gap:4px;padding:4px}.tools button{min-height:43px;font-size:10px;padding:5px 8px;gap:2px 5px}.tools button>span{font-size:7px}.tools small{font-size:6px;letter-spacing:.8px}.tools #undo{border-top:0;border-left:1px solid var(--line);margin:0;min-width:30px}.coordinates{top:18px;left:20px;right:20px;font-size:7px}.bottom-notes{left:20px;right:20px;bottom:16px;font-size:8px;letter-spacing:.3px}#hint{font-size:8px}#invitation{max-width:calc(100% - 48px);width:390px;top:43%}#invitation h2{font-size:clamp(21px,5.6vw,32px)}#invitation .eyebrow{font-size:7px;margin-bottom:16px}#invitation p:not(.eyebrow){font-size:11px}#invitation>span{font-size:6px;letter-spacing:1px;margin-top:20px}footer{margin:0 18px;grid-template-columns:1fr 1fr;gap:0;padding:10px 0}.reveal{grid-column:1/-1;grid-row:1;width:100%}.secondary{grid-row:2;gap:0}.secondary button{font-size:10px;padding:6px}.result-tools{grid-row:2;gap:0}.result-tools button{font-size:10px;padding:6px}#controls{right:18px;top:15px;max-height:calc(100% - 110px);width:250px}#status{bottom:140px}.dialog-title p{font-size:11px}}
.tools button{white-space:nowrap;flex-shrink:0}