html,body{margin:0;height:100%;overflow:hidden}html{background:#1d3320}@supports (height: 100lvh){html{height:100lvh}}canvas{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh}@supports (height: 100lvh){canvas{height:100lvh}}.back{position:fixed;left:12px;bottom:12px;font:12px ui-monospace,Menlo,monospace;color:#fff;opacity:.5;text-decoration:none}.back:hover{opacity:1}.hint{position:fixed;right:12px;bottom:12px;margin:0;font:12px ui-monospace,Menlo,monospace;color:#fff;opacity:.4;pointer-events:none;transition:opacity 1.2s}.hint.gone{opacity:0}canvas{touch-action:none;cursor:grab}canvas:active{cursor:grabbing}.back{display:none}.plate{position:fixed;top:max(24px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));pointer-events:none;color:#f3f5ee}.plate b{display:block;white-space:nowrap;font-family:IBM Plex Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:56px;font-weight:700;letter-spacing:-.02em;line-height:.9;text-transform:uppercase;text-shadow:0 1px 24px rgba(10,30,8,.25)}.plate .head>i{display:block;margin-top:6px;font-style:normal;font:600 14px/1.15 Inter,Helvetica Neue,Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}.plate .home{color:inherit;text-decoration:none;pointer-events:auto;opacity:.85}.plate .home:hover{opacity:1}.plate .home span[lang=ja]{font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Yu Gothic,sans-serif;letter-spacing:.06em}@media(max-width:640px){.plate{top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left))}.plate b{font-size:34px}.plate .head>i{font-size:10px}}.fs,body.touch .gyro{position:fixed;z-index:3;top:max(var(--edge),env(safe-area-inset-top));right:calc(max(var(--edge),env(safe-area-inset-right)) + 4px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--glass);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--rim),0 6px 20px #06120433;transition:opacity .4s,background .2s,color .2s,transform .25s cubic-bezier(.3,1.4,.5,1);-webkit-tap-highlight-color:transparent}.fs:hover,body.touch .gyro:hover{background:linear-gradient(to bottom,#34502eb3,#1a301694)}.fs:active,body.touch .gyro:active{transform:scale(.94)}.fs .out,body.clean .fs .in{display:none}body.clean .fs .out{display:inline}body.clean .plate,body.clean .hint{display:none}body.clean .fs{opacity:0}body.clean.near .fs,body.clean .fs:focus-visible{opacity:.7}body.clean.fullscreen .fs,.hint .narrow{display:none}@media(max-width:640px){.hint .wide{display:none}.hint .narrow{display:inline}}body.loading,body.drawing{background-color:#f1f0e8;background-image:linear-gradient(rgba(111,143,106,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(111,143,106,.35) 1px,transparent 1px),linear-gradient(rgba(111,143,106,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(111,143,106,.22) 1px,transparent 1px),linear-gradient(rgba(111,143,106,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(111,143,106,.12) 1px,transparent 1px);background-size:50px 50px,50px 50px,25px 25px,25px 25px,5px 5px,5px 5px}canvas.pending{opacity:0}.plate{transition:color 1.4s ease}body.loading .plate{color:#2b3a2c}.plate .loading-label{opacity:0;transition:opacity .6s}body.loading .plate .loading-label{opacity:.7}body.loading .fs{opacity:0;pointer-events:none}.gyro,body.touch .fs{display:none}body.touch .gyro.on{background:var(--ink);color:#1a3018}body.loading .gyro{opacity:0;pointer-events:none}body.clean .gyro{display:none}body.drawing .plate{color:#2b3a2c}body.drawing .fs,body.drawing .gyro{color:#2b3a2c;background:#f1f0e8b3;box-shadow:inset 0 0 0 1px #2b3a2c40}body.snap .plate,body.snap .fs,body.snap .gyro,body.snap .act-main{transition:none}body:not(.loading) .plate .loading-label{display:none}:root{--ink: #f3f5ee;--lime: #c3f26e;--glass: linear-gradient(to bottom, rgba(38, 62, 34, .62), rgba(18, 36, 16, .5));--glass-blur: blur(24px) saturate(1.5);--rim: inset 0 1px 0 rgba(243, 245, 238, .16), inset 0 0 0 1px rgba(243, 245, 238, .1);--ui: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;--edge: 22px}@media(max-width:640px){:root{--edge: 14px}}.actions{position:fixed;z-index:4;right:max(var(--edge),env(safe-area-inset-right));bottom:max(var(--edge),env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;font:500 12px/1 var(--ui);color:var(--ink);transition:opacity .4s}body.loading .actions,body.clean .actions{opacity:0;pointer-events:none}.act-main{position:relative;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;background:var(--glass);color:var(--ink);cursor:pointer;touch-action:none;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--rim),0 6px 20px #06120440;transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s,color .2s;-webkit-tap-highlight-color:transparent}.act-main:hover{background:linear-gradient(to bottom,#34502eb3,#1a301694)}.act-main:active{transform:scale(.94)}.act-main svg{width:27px;height:27px;transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .2s}.act-main .x{position:absolute;width:18px;height:18px;opacity:0;transform:rotate(-90deg) scale(.6);transition:inherit}.act-main .x:before,.act-main .x:after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.8px;margin:-.9px 0 0 -9px;border-radius:1px;background:currentColor;transform:rotate(45deg)}.act-main .x:after{transform:rotate(-45deg)}.actions.open .act-main{background:var(--ink);color:#1a3018}.actions.open .act-main svg{opacity:0;transform:rotate(90deg) scale(.6)}.actions.open .act-main .x{opacity:1;transform:none}.act-menu{display:flex;flex-direction:column;gap:2px;padding:5px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--rim),0 10px 30px #06120440;transform-origin:50% 100%;transform:translateY(14px) scale(.85);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.3,1.3,.5,1),opacity .18s}.actions.open .act-menu{transform:none;opacity:1;pointer-events:auto}.act-item{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:#f3f5eed1;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(8px) scale(.7);transition:transform .3s cubic-bezier(.3,1.4,.5,1),opacity .2s,background .15s,color .15s}.actions.open .act-item{opacity:1;transform:none;transition-delay:calc(var(--i) * 22ms),calc(var(--i) * 22ms),0s,0s}.act-item.lit,.act-item:focus-visible{background:#f3f5ee24;color:var(--ink);outline:none}.act-item:active{background:var(--ink);color:#1a3018}.act-item.fired svg{animation:act-pop .35s cubic-bezier(.3,1.5,.5,1)}@keyframes act-pop{40%{transform:scale(1.25)}}.act-label{position:absolute;right:calc(100% + 12px);top:50%;display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;white-space:nowrap;pointer-events:none;background:#0e1c0cb8;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:0;transform:translate(6px,-50%);transition:opacity .14s,transform .18s}.act-label kbd{display:inline-grid;place-items:center;min-width:15px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:4px;background:#f3f5ee29;font:600 9px/1 var(--ui);letter-spacing:0}.act-item.lit .act-label{opacity:1;transform:translateY(-50%)}@media(hover:none){.act-label{display:none}}.set-btn{position:fixed;z-index:4;top:max(var(--edge),env(safe-area-inset-top));right:calc(max(var(--edge),env(safe-area-inset-right)) + 58px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--glass);color:var(--ink);cursor:pointer;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--rim),0 6px 20px #06120433;transition:opacity .4s,background .2s,color .2s,transform .25s cubic-bezier(.3,1.4,.5,1);-webkit-tap-highlight-color:transparent}.set-btn:hover{background:linear-gradient(to bottom,#34502eb3,#1a301694)}.set-btn:active{transform:scale(.94)}.set-btn.on{background:var(--ink);color:#1a3018}body.loading .set-btn,body.clean .set-btn{opacity:0;pointer-events:none}body.drawing .set-btn,body.drawing .act-main,body.drawing .act-menu{background:#f1f0e8b3;color:#2b3a2c;box-shadow:inset 0 0 0 1px #2b3a2c40}body.drawing .act-item{color:#2b3a2c}.settings{position:fixed;z-index:5;right:calc(max(var(--edge),env(safe-area-inset-right)) + 4px);top:calc(max(var(--edge),env(safe-area-inset-top)) + 56px);width:268px;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;border-radius:22px;isolation:isolate;transform:translateZ(0);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 16px 40px #0612044d;color:var(--ink);font:400 12px/1.3 var(--ui);animation:set-in .28s cubic-bezier(.3,1.2,.5,1)}.settings[hidden]{display:none}.set-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.set-body::-webkit-scrollbar{display:none}@keyframes set-in{0%{opacity:0;transform:translateY(-10px) scale(.97)}}.set-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 10px 8px 16px}.set-head b{font:600 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase}.set-close{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#f3f5ee1a;color:var(--ink);cursor:pointer}.set-close:hover{background:#f3f5ee33}.settings h5{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font:600 9px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#f3f5ee8c}.settings h5:after{content:"";flex:1;height:1px;background:#f3f5ee1f}.settings h5:first-of-type{margin-top:2px}.settings .row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;cursor:pointer}.settings .row>span{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.settings output{font:500 11px/1 var(--ui);font-variant-numeric:tabular-nums;color:#f3f5ee8c}.settings .row.range{position:relative;display:block;padding:3px 0}.settings .row.range>span{position:absolute;left:15px;right:15px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;font:500 12px/1 var(--ui);color:var(--ink);text-shadow:0 1px 2px rgba(6,18,4,.35)}.settings .row.range output{color:#f3f5eebf;text-shadow:inherit}.settings input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:0;border-radius:999px;background:none;cursor:ew-resize;touch-action:pan-y;outline:none}.settings input[type=range]::-webkit-slider-runnable-track{height:34px;border-radius:999px;background:linear-gradient(to left,rgba(214,250,150,.95) 2px,transparent 2px) 0 0 / var(--p, 50%) 100% no-repeat,linear-gradient(to right,#c3f26e6b,#c3f26e9e) 0 0 / var(--p, 50%) 100% no-repeat,#f3f5ee14;box-shadow:inset 0 0 0 1px #f3f5ee0f;transition:background-color .15s}.settings input[type=range]:hover::-webkit-slider-runnable-track{background-color:#f3f5ee1f}.settings input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:18px;margin-top:8px;border:0;border-radius:2px;background:#fff;box-shadow:0 0 6px #c3f26ecc;opacity:0;transition:height .15s,margin .15s,opacity .15s}.settings input[type=range]:active::-webkit-slider-thumb{height:24px;margin-top:5px;opacity:1}.settings input[type=range]:focus-visible::-webkit-slider-runnable-track{box-shadow:inset 0 0 0 1.5px #f3f5ee80}.settings input[type=range]::-moz-range-track{height:34px;border-radius:999px;background:#f3f5ee14}.settings input[type=range]::-moz-range-progress{height:34px;border-radius:999px 0 0 999px;background:linear-gradient(to right,#c3f26e6b,#c3f26e9e)}.settings input[type=range]::-moz-range-thumb{width:3px;height:18px;border:0;border-radius:2px;background:#fff;box-shadow:0 0 6px #c3f26ecc;opacity:0}.settings input[type=range]:active::-moz-range-thumb{opacity:1}.settings input[type=checkbox]{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:34px;height:20px;margin:0;border-radius:999px;background:#f3f5ee2e;cursor:pointer;transition:background .18s}.settings input[type=checkbox]:after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}.settings input[type=checkbox]:checked{background:var(--lime)}.settings input[type=checkbox]:checked:after{transform:translate(14px)}.settings select{-webkit-appearance:none;appearance:none;height:26px;padding:0 26px 0 11px;border:0;border-radius:999px;background:#f3f5ee1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f3f5ee' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--ink);font:500 11px/1 var(--ui);cursor:pointer;outline:none}.settings select option{background:#1d3320}.settings .acts{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}.settings .act{display:inline-flex;align-items:center;gap:7px;padding:5px 5px 5px 11px;border:0;border-radius:999px;background:#f3f5ee1a;color:var(--ink);cursor:pointer;font:600 9px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase}.settings .act kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:5px;background:#f3f5ee29;font:600 10px/1 var(--ui);letter-spacing:0}.settings .act:hover kbd{background:#f3f5ee42}@media(hover:none){.settings .act{padding:8px 11px}.settings .act kbd{display:none}}.settings .act:hover{background:#f3f5ee33}.settings .reset{display:block;width:100%;height:38px;margin:14px 0 4px;border:0;border-radius:999px;cursor:pointer;background:#f3f5ee1a;color:var(--ink);font:600 10px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;transition:background .15s,color .15s}.settings .reset:hover{background:#f3f5ee2e}.settings .reset:active{background:var(--ink);color:#1a3018}body.clean .settings{display:none}@media(max-width:640px){.settings{left:8px;right:8px;top:auto;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:42vh;max-height:42dvh;border-radius:24px;animation:sheet-in .32s cubic-bezier(.25,1,.4,1)}.set-head{padding:8px 8px 4px 16px}.set-close{width:26px;height:26px}.set-body{padding:0 12px 12px}.settings h5{margin:8px 0 3px}.settings .row{min-height:32px}.settings .row.range{padding:2px 0}.settings input[type=range],.settings input[type=range]::-webkit-slider-runnable-track{height:32px}.settings input[type=range]::-webkit-slider-thumb{height:18px;margin-top:7px}.settings input[type=range]:active::-webkit-slider-thumb{height:24px;margin-top:4px}.settings input[type=range]::-moz-range-track,.settings input[type=range]::-moz-range-progress{height:32px}.settings .reset{height:36px;margin-top:10px}}@keyframes sheet-in{0%{transform:translateY(100%)}}
