*{box-sizing:border-box}body{margin:0;color:#263238;background:#f2f4f5;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#fff;border:1px solid #d6dddf;border-radius:7px;padding:8px 12px;font-size:14px}button:hover{background:#e9eef0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #637f96;outline-offset:3px}header{height:78px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce1e4;background:white}.brand{font-size:19px;font-weight:700;letter-spacing:.2em}.brand span{font-size:12px;letter-spacing:.12em;color:#727e85;display:block}.top-actions{display:flex;align-items:center;gap:18px}.prototype{font-size:12px;color:#66747b}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;height:calc(100dvh - 78px)}.stage{position:relative;overflow:hidden;min-height:450px;background:#e9edef}#viewport{height:100%;width:100%;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5}.stage-caption{pointer-events:none;position:absolute;left:32px;top:24px}.stage-caption span{letter-spacing:.18em;font-size:12px;color:#6b7c86}.stage-caption h1{font-size:19px;font-weight:500;letter-spacing:.08em;margin-top:6px}.stage-foot{position:absolute;bottom:24px;left:20px;right:20px;text-align:center}.stage-foot p{font-size:12px;color:#56646c;margin:0 0 12px}.stage-foot nav{display:inline-flex;gap:4px;background:#ffffffed;padding:5px;border:1px solid white;border-radius:12px;box-shadow:0 3px 18px #293d4a14}.stage-foot button{border:none;background:transparent;padding:8px 17px}.stage-foot button.active{background:#293a43;color:white}aside{background:white;overflow-y:auto;padding:24px;border-left:1px solid #dce1e4}.panel-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}.panel-head h2{font-size:15px;margin:0;font-weight:600}.step{font-size:12px;color:#829099;font-weight:600;letter-spacing:.05em}select{width:100%;padding:10px;border:1px solid #d6dddf;border-radius:6px;background:#fff;color:#263238;font-size:16px}.color-title{margin-top:24px}#material{margin-left:auto;color:#79858c;font-size:12px}.swatch-row{display:flex;height:46px;border-radius:6px;overflow:hidden}.swatch-row>div{width:50%;display:flex;align-items:center;justify-content:center}.swatch-row span{font-size:12px;background:#ffffffcb;border-radius:3px;padding:0 6px;color:#34424b}.wheel-wrap{position:relative;width:236px;height:236px;margin:20px auto 15px;touch-action:none}#wheel{width:100%;height:100%;border-radius:50%;cursor:crosshair}#wheel-cursor{position:absolute;width:19px;height:19px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1.5px #263238;pointer-events:none;transform:translate(-50%,-50%)}.label-line{display:flex;justify-content:space-between;font-size:14px}#value{width:100%;appearance:none;height:14px;border-radius:20px;margin:12px 0 20px}#value::-webkit-slider-thumb{appearance:none;width:25px;height:25px;border:3px solid #fff;border-radius:50%;background:#3f515d;box-shadow:0 0 0 1px #829099}#value::-moz-range-thumb{width:20px;height:20px;border:3px solid #fff;border-radius:50%;background:#3f515d}.numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.numbers label{font-size:13px;color:#52636d}.numbers small{color:#839198}.numbers input{width:100%;border:1px solid #d6dddf;border-radius:5px;padding:7px 5px;font-size:15px;color:#293a43;background:#f9fafb}.hex-label{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:14px}.hex-label input{width:116px;border:1px solid #d6dddf;padding:6px 10px;border-radius:5px;font-family:monospace;font-size:16px;text-transform:uppercase}#presets{display:flex;gap:9px;margin:17px 0}#presets button{width:28px;height:28px;border-radius:50%;padding:0;border:1px solid #26323830}.link-option{display:flex;align-items:flex-start;gap:6px;font-size:13px;margin:15px 0 8px}.link-option input{margin-top:5px;accent-color:#415967}.note,.disclaimer{font-size:12px;line-height:1.8;color:#73818a}.saved{border-top:1px solid #e5e9eb;margin-top:20px;padding-top:18px}.save-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.saved small{display:block;color:#7b8890;font-size:12px;margin:7px 0}button:disabled{opacity:.4;cursor:default}.reset{width:100%;margin-top:8px;background:transparent}.disclaimer{margin-bottom:0}#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#243743;color:white;padding:12px 20px;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:20;font-size:14px}#toast.show{opacity:1}dialog{border:none;border-radius:12px;max-width:1000px;width:90vw;padding:18px;background:#fff}dialog::backdrop{background:#12202cb3}dialog img{width:100%;display:block;margin-top:15px}dialog button{float:right}dialog p{font-size:14px;color:#52636d}dialog:not([open]){display:none}@media(max-width:800px){header{height:65px;padding:0 16px}.brand{font-size:16px}.top-actions{gap:8px}.prototype{display:none}main{display:block;height:auto}.stage{height:48dvh;min-height:330px;position:sticky;top:0;z-index:2}.stage-caption{left:16px;top:10px}.stage-caption h1{font-size:14px;margin:2px 0}.stage-caption span{font-size:10px}.stage-foot{bottom:10px;left:5px;right:5px}.stage-foot p{font-size:11px;margin-bottom:5px}.stage-foot button{padding:6px 13px;font-size:13px}aside{padding:20px;overflow:visible}.wheel-wrap{width:244px;height:244px}.numbers input{font-size:16px}.color-title{margin-top:20px}.swatch-row{height:35px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Touch targets and loading remain readable on smaller screens. */
#loading{max-width:85%;text-align:center;padding:15px 20px;background:#fffffff2;border-radius:10px;box-shadow:0 5px 25px #26323812;font-size:14px}
.numbers label,.link-option{font-size:14px}.stage-foot p{font-size:14px}.stage-foot nav{max-width:100%}
@media(max-width:800px){.stage-foot p{font-size:12px}.stage-foot button{min-height:40px;padding:6px 11px}.stage{min-height:340px}#presets button{width:30px;height:30px}.note{font-size:13px}}

[hidden]{display:none!important}
.finish-block{margin-top:16px}.finish-block>label{display:block;font-size:14px;margin-bottom:6px}.finish-block select{font-size:14px}.finish-block details{margin-top:10px;padding:10px 12px;background:#f4f6f7;border-radius:7px;font-size:14px}.finish-block summary{cursor:pointer;min-height:28px}.finish-block details[open] summary{margin-bottom:12px}.finish-block input[type=range]{width:100%;margin:10px 0 17px;accent-color:#415967;min-height:24px}.finish-block output{font-variant-numeric:tabular-nums}.sample-note,.picker-note{font-size:12px;color:#63717a;line-height:1.6;margin:7px 0 0}.picker-tabs{display:flex;gap:4px;background:#edf1f3;padding:4px;border-radius:8px;margin:16px 0 12px}.picker-tabs button{flex:1;background:transparent;border:0;min-height:40px;padding:6px}.picker-tabs button[aria-pressed=true]{background:#fff;box-shadow:0 1px 5px #2632381c;font-weight:600}.axis-label{display:flex;justify-content:space-between;font-size:12px;color:#5e6c75;margin:4px 0 6px}.bottom-axis{justify-content:center;margin:6px 0 0}.warm-wrap{position:relative;width:100%;aspect-ratio:1;touch-action:none;isolation:isolate}.warm-wrap canvas{width:100%;height:100%;display:block;cursor:crosshair;border-radius:5px}.warm-wrap:focus-within{outline:2px solid #637f96;outline-offset:5px}#warm-cursor{position:absolute;width:18px;height:18px;border:3px solid #fff;box-shadow:0 0 0 1.5px #263238;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.picker-note{min-height:38px}.brightness{margin-top:12px}#wood-direction select{margin-top:6px}.stage-caption h1{font-size:17px}
@media(max-width:800px){.finish-block select{font-size:16px}.warm-wrap{max-width:340px;margin:0 auto}.axis-label{max-width:340px;margin-left:auto;margin-right:auto}.picker-note{min-height:0;margin-bottom:14px}.picker-tabs button{min-height:44px}.stage-caption h1{font-size:14px}}

.brand{display:flex;align-items:center;gap:18px;min-width:0}.brand img{display:block;width:auto;height:54px;max-width:160px;object-fit:contain}.brand span{letter-spacing:.08em;white-space:nowrap}
@media(max-width:800px){.brand{gap:10px}.brand img{height:42px;max-width:115px}.brand span{font-size:11px}}
@media(max-width:380px){.brand span{display:none}}

/* Compact, native disclosure keeps the house clear until a preset view is needed. */
.stage-foot{left:12px;right:12px;bottom:12px;display:flex;justify-content:flex-end;pointer-events:none}
#view-menu{pointer-events:auto;max-width:100%;text-align:right}
#view-menu summary{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:8px 13px;list-style:none;cursor:pointer;background:#ffffffed;border:1px solid #d6dddf;border-radius:9px;font-size:14px;box-shadow:0 2px 10px #293d4a12}
#view-menu summary::-webkit-details-marker{display:none}
#view-menu summary:focus-visible{outline:3px solid #637f96;outline-offset:3px}
.view-toggle-mark::after{content:'＋'}
#view-menu[open] .view-toggle-mark::after{content:'−'}
.view-options{margin-top:6px;padding:9px;background:#ffffffed;border:1px solid white;border-radius:10px;text-align:center}
.stage-foot .view-options p{margin:0 0 6px;font-size:12px}
.stage-foot nav{display:flex;flex-wrap:wrap;justify-content:center;padding:0;border:0;box-shadow:none;background:transparent}
.stage-foot nav button{min-height:44px;padding:8px 12px;font-size:14px}
@media(max-width:800px){.stage-foot nav button{padding:8px 10px}.stage-foot .view-options p{max-width:300px;font-size:12px}}