:root{--steam: #f6f1e7;--hinoki: #c99a5b;--ai: #1c4e6e;--kerorin: #f2c12e;--sumi: #2e2a24;--tile: #ece2d0;--hinoki-deep: #9a6b36;--sumi-dim: rgba(46, 42, 36, .62);--font-display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif;--font-ui: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;--font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;--tile-wall: repeating-linear-gradient( 0deg, transparent 0 27px, rgba(154, 107, 54, .07) 27px 28px ), repeating-linear-gradient( 90deg, transparent 0 27px, rgba(154, 107, 54, .07) 27px 28px ), linear-gradient(180deg, #f8f3ea, #efe5d4);--grout: rgba(154, 107, 54, .26)}.brand{position:absolute;top:24px;left:26px;-webkit-user-select:none;user-select:none;pointer-events:none}.noren{position:relative;display:grid;place-items:center;width:66px;height:56px;border-radius:3px 3px 7px 7px;background:linear-gradient(180deg,#245a7c,#143e58);color:var(--steam);font:30px/1 var(--font-display);box-shadow:0 6px 16px #08182466;animation:noren-drop .7s .1s both cubic-bezier(.2,.8,.2,1);transform-origin:top center}.noren:before{content:"";position:absolute;top:-4px;left:-9px;right:-9px;height:5px;border-radius:3px;background:linear-gradient(180deg,#d8b176,#a87d45);box-shadow:0 1px 2px #0000004d}.noren:after{content:"";position:absolute;top:46%;bottom:0;left:50%;width:2px;transform:translate(-1px);background:#06141e73}.brand__name{margin-top:14px;font:22px/1 var(--font-display);letter-spacing:.04em;color:var(--steam);text-shadow:0 1px 10px rgba(10,28,40,.55)}.brand__sub{margin-top:9px;font:500 11px/1 var(--font-ui);letter-spacing:.22em;color:var(--steam);opacity:.82;text-shadow:0 1px 8px rgba(10,28,40,.55)}.panel{position:absolute;top:20px;right:20px;width:282px;padding:20px;border-radius:16px;color:var(--sumi);font:14px/1.5 var(--font-ui);background:var(--tile-wall);border:1px solid var(--hinoki);box-shadow:0 18px 44px #281a0852,inset 0 0 0 1px #fff6;animation:panel-rise .7s .28s both cubic-bezier(.2,.7,.2,1)}.panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:9px 12px;border-radius:9px;background:linear-gradient(180deg,#d6ae6f,#c08f3f);border:1px solid var(--hinoki-deep);box-shadow:inset 0 1px #ffffff59,inset 0 -2px 4px #7a54284d}.panel__title{font:18px/1 var(--font-display);letter-spacing:.05em;color:var(--ai)}.icon-btn{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;border:1px solid rgba(122,84,40,.45);background:#ffffff8c;color:var(--ai);font-size:16px;line-height:1;cursor:pointer;transition:background .15s}.icon-btn:hover{background:#ffffffd9}.divider{height:1px;margin:16px 0;border:0;background:var(--grout)}.field+.field{margin-top:14px}.field__caption{display:block;margin-bottom:8px;font-weight:700;font-size:13px;color:var(--sumi)}.gauge{transition:opacity .2s}.gauge--off{opacity:.42}.gauge__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.gauge__label{font-weight:700;font-size:13px;color:var(--sumi)}.gauge__meta{display:inline-flex;align-items:center;gap:10px}.gauge__value{min-width:2.2em;text-align:right;font:500 14px/1 var(--font-mono);color:var(--ai);font-variant-numeric:tabular-nums}.gauge__range{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer}.gauge__range::-webkit-slider-runnable-track{height:12px;border-radius:4px;background:linear-gradient(90deg,var(--ai),#3f8aa4 78%,#d7efe8) left center / var(--fill, 0%) 100% no-repeat,repeating-linear-gradient(90deg,transparent 0 13px,var(--grout) 13px 14px),var(--tile);box-shadow:inset 0 1px 2px #0003,inset 0 0 0 1px #9a6b364d}.gauge__range::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6c188,#c99a5b 58%,#a87d45);border:1px solid var(--hinoki-deep);box-shadow:0 1px 3px #281a0873,0 0 #f2c12e00;transition:box-shadow .15s}.gauge__range:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 3px #281a0873,0 0 0 4px #f2c12e80}.gauge__range::-moz-range-track{height:12px;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 13px,var(--grout) 13px 14px),var(--tile);box-shadow:inset 0 1px 2px #0003,inset 0 0 0 1px #9a6b364d}.gauge__range::-moz-range-progress{height:12px;border-radius:4px;background:linear-gradient(90deg,var(--ai),#3f8aa4)}.gauge__range::-moz-range-thumb{width:18px;height:18px;border:1px solid var(--hinoki-deep);border-radius:50%;background:radial-gradient(circle at 35% 30%,#e6c188,#c99a5b 58%,#a87d45);box-shadow:0 1px 3px #281a0873}.gauge__range:focus-visible::-moz-range-thumb{box-shadow:0 1px 3px #281a0873,0 0 0 4px #f2c12e80}.toggle{position:relative;display:inline-flex;flex:none}.toggle__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.toggle__track{display:inline-flex;align-items:center;width:38px;height:22px;padding:2px;border-radius:999px;background:var(--tile);border:1px solid rgba(122,84,40,.4);transition:background .2s,border-color .2s}.toggle__knob{width:16px;height:16px;border-radius:50%;background:var(--steam);box-shadow:0 1px 2px #281a0873;transition:transform .2s}.toggle__input:checked+.toggle__track{background:linear-gradient(90deg,var(--ai),#3f8aa4);border-color:transparent}.toggle__input:checked+.toggle__track .toggle__knob{transform:translate(16px)}.toggle__input:focus-visible+.toggle__track{outline:2px solid var(--kerorin);outline-offset:2px}.segments{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:10px;background:#9a6b361f;border:1px solid rgba(154,107,54,.28)}.segments__btn{padding:8px 0;border:0;border-radius:7px;background:transparent;color:var(--sumi-dim);font:700 12px/1 var(--font-ui);cursor:pointer;transition:color .15s,background .15s}.segments__btn:hover{color:var(--sumi)}.segments__btn.is-active{color:var(--steam);background:linear-gradient(180deg,#245a7c,var(--ai));box-shadow:0 1px 3px #14283866}.segments__btn:focus-visible{outline:2px solid var(--kerorin);outline-offset:2px}.swatches{display:flex;align-items:center;gap:8px}.swatch{position:relative;width:36px;height:36px;padding:0;border-radius:8px;border:1px solid rgba(122,84,40,.4);box-shadow:inset 0 0 0 2px #ffffff40;cursor:pointer;transition:box-shadow .15s,transform .1s}.swatch:hover{transform:translateY(-1px)}.swatch.is-active{box-shadow:0 0 0 2px var(--steam),0 0 0 4px var(--kerorin)}.swatch:focus-visible{outline:2px solid var(--kerorin);outline-offset:3px}.swatch--custom{display:grid;place-items:center;color:var(--steam);font-size:16px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.4)}.swatch__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}.btn-refill{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 0;border-radius:10px;border:1px solid #d39e1e;background:linear-gradient(180deg,#f6cd45,var(--kerorin));color:#5a3d12;font:700 14px/1 var(--font-ui);cursor:pointer;box-shadow:0 2px #cf9c1c,0 4px 10px #966e144d;transition:transform .08s,box-shadow .08s,filter .15s}.btn-refill:hover{filter:brightness(1.04)}.btn-refill:active{transform:translateY(2px);box-shadow:0 0 #cf9c1c,0 2px 6px #966e144d}.btn-refill:focus-visible{outline:2px solid var(--ai);outline-offset:2px}.btn-refill__icon{font-size:15px}.panel-tab{position:absolute;top:20px;right:20px;display:inline-flex;align-items:center;gap:9px;padding:10px 15px 11px;border-radius:3px 3px 9px 9px;background:linear-gradient(180deg,#245a7c,#143e58);border:0;color:var(--steam);font:700 13px/1 var(--font-ui);box-shadow:0 8px 22px #08182466;cursor:pointer;animation:noren-drop .5s both cubic-bezier(.2,.8,.2,1);transform-origin:top center}.panel-tab:hover{filter:brightness(1.06)}.panel-tab:focus-visible{outline:2px solid var(--kerorin);outline-offset:2px}.panel-tab__glyph{font:18px/1 var(--font-display)}.notice{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--sumi);background:radial-gradient(120% 120% at 50% 25%,#f8f3ea,#d9c39c 72%)}.notice__mark{display:inline-grid;place-items:center;width:64px;height:54px;margin:0 auto;border-radius:3px 3px 7px 7px;background:linear-gradient(180deg,#245a7c,#143e58);color:var(--steam);font:30px/1 var(--font-display)}.notice__msg{max-width:380px;margin:16px auto 0;font:15px/1.7 var(--font-ui);color:var(--sumi)}@keyframes noren-drop{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}@keyframes panel-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media (max-width: 640px){.panel{top:auto;right:12px;bottom:12px;left:12px;width:auto;max-height:72vh;overflow-y:auto;border-radius:18px}.panel-tab{top:auto;right:16px;bottom:16px}.brand{top:16px;left:16px}.brand__name{font-size:19px}}@media (prefers-reduced-motion: reduce){.noren,.panel,.panel-tab{animation:none}.toggle__knob,.segments__btn,.swatch,.btn-refill,.icon-btn{transition:none}}