:root{font-family:Arial,Helvetica,sans-serif;color:#353737;background:#eaece9;font-synthesis:none;--line:#caced0;--ink:#303735;--muted:#5e685c}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 50% 36%,#fafbf8 0,#eef0ec 40%,#e2e5e1 100%);min-height:100svh}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:4px}
header{height:72px;padding:0 3.5%;display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative;z-index:3}
.brand{text-decoration:none;display:flex;align-items:center;min-height:44px;font-size:14px;letter-spacing:-.02em;font-weight:600}
.about{position:relative;font-size:12px}
.about summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none;padding:10px 12px;border-radius:6px}
.about summary::-webkit-details-marker{display:none}
.about summary span{display:inline-block;width:16px;text-align:center;font-size:16px;font-weight:400;flex-shrink:0}
.about[open] summary span{transform:rotate(45deg)}
.about-content{position:absolute;right:0;top:46px;width:285px;max-width:calc(100vw - 34px);padding:16px;background:#fbfcf9;border:1px solid #d9ddd7;border-radius:10px;box-shadow:0 12px 36px #24312715;line-height:1.65}
.about-content p{margin:0 0 12px}
.about-content a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:6px}
.about-content a span{flex-shrink:0;width:16px;text-align:center}
.stage{position:relative;height:calc(100svh - 280px);min-height:430px;max-height:820px;margin:0 3.5%}
.specimen{position:absolute;left:0;top:20px;z-index:1;pointer-events:none}
h1{font-weight:400;font-size:39px;line-height:1.1;letter-spacing:-.055em;margin:0 0 8px}
#finish-name{font-size:13px;margin:0;color:var(--muted)}
#viewport{position:absolute;inset:-30px 0 15px;cursor:grab;touch-action:pan-y}
#viewport:active{cursor:grabbing}
#viewport canvas,#fallback{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
.contact-shadow{position:absolute;left:50%;top:84%;width:34%;height:8%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#38423926,transparent 68%);filter:blur(6px);pointer-events:none}
.stage-bottom{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.gesture{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.gesture span{font-size:18px}
.instrument{max-width:1100px;margin:12px auto 0;padding:0 26px}
fieldset{display:grid;grid-template-columns:190px repeat(3,minmax(0,1fr)) 180px;gap:0;border:1px solid #cbd0c8;border-radius:12px;padding:18px 10px;background:linear-gradient(#fcfdfa,#f0f2ed);box-shadow:inset 0 1px 0 #fff,0 2px 3px #2c35230a,0 10px 22px -18px #35462c55;min-width:0;margin:0}
.finish-control,.parameter{padding:0 16px;min-width:0}
.control-caption{color:var(--muted);font-size:12px;display:block;margin-bottom:8px;line-height:16px}
.presets{display:flex;gap:4px}
.presets button{padding:4px;display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid transparent;border-radius:7px;background:transparent;font:12px/1.3 Arial,Helvetica,sans-serif;color:var(--muted);min-width:44px;min-height:54px}
.swatch{display:block;width:26px;height:26px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 1px 2px #ffffffa3,inset 0 -2px 3px #0004,0 1px 2px #0002}
.presets button[aria-pressed=true]{border-color:#697560;background:#e7ecdf;color:#303b29;box-shadow:inset 0 1px 0 #fff}
.clay{background:linear-gradient(135deg,#ffe2c0 3%,#c78556 29%,#9c5431 60%,#dca478)}
.silver{background:linear-gradient(135deg,#fff 2%,#c4cdca 30%,#7c8581 55%,#e0e7df 90%)}
.ink{background:linear-gradient(135deg,#889687,#314739 45%,#10271c 67%,#486049)}
label{font-size:12px;display:flex;justify-content:space-between;gap:6px;line-height:16px;margin:0 0 8px}
output{font:12px/16px Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;color:var(--muted)}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;width:100%;margin:0;height:32px;display:block;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#64735b var(--fill,35%),#d4dacf var(--fill,35%));border-radius:3px;box-shadow:0 1px 0 #fff}
input[type=range]::-moz-range-track{height:3px;background:#d4dacf;border-radius:3px}
input[type=range]::-moz-range-progress{height:3px;background:#64735b}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:18px;margin-top:-7px;border:1px solid #89977f;border-radius:4px;background:linear-gradient(90deg,#fff,#e7ece2);box-shadow:0 1px 2px #26351b2a}
input[type=range]::-moz-range-thumb{width:12px;height:16px;border:1px solid #89977f;border-radius:4px;background:#f7f9f4}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:3px}
.rotation-actions{display:flex;justify-content:space-between;gap:8px;margin-top:2px}
.rotation-actions button{font:12px/1.4 Arial,Helvetica,sans-serif;padding:6px 0;border:0;background:transparent;color:#475a3c;min-height:36px;text-align:left}
button{font:inherit;cursor:pointer;transition:transform 120ms cubic-bezier(.23,1,.32,1),color 120ms ease}
button:active:not(:disabled){transform:scale(.98)}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #536638;outline-offset:4px;border-radius:3px}
fieldset:disabled{opacity:.6}
button:disabled{cursor:default}
footer{max-width:1048px;display:flex;gap:24px;justify-content:space-between;margin:14px auto 0;padding:0 0 20px;font-size:12px;color:var(--muted);line-height:1.5}
footer p{margin:0;max-width:410px}
#render-state{text-align:right;max-width:380px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.notice{font-size:12px;padding:0 4% 20px}
.is-static .gesture{display:none}
.is-static #viewport{cursor:default}
@media(hover:hover) and (pointer:fine){.presets button:hover{color:#263720;background:#edf0e6}.rotation-actions button:hover{color:#202e17;text-decoration:underline}.about summary:hover,.about-content a:hover{background:#e6eae1}}
@media(min-width:1700px){.stage{margin-left:6%;margin-right:6%}}
@media(max-width:1000px){.instrument{max-width:900px}fieldset{grid-template-columns:170px repeat(3,minmax(0,1fr)) 160px}.parameter,.finish-control{padding:0 10px}footer{padding:0 26px 20px}}
@media(max-width:760px){
 header{height:64px;padding:0 20px;gap:8px}.brand{font-size:13px}.about summary{font-size:12px;padding:10px 8px;gap:8px}
 .stage{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;margin:0 20px;height:clamp(320px,50svh,390px);min-height:0}.specimen{position:relative;top:auto;left:auto;padding-top:16px}h1{font-size:30px}#finish-name{font-size:12px}
 #viewport{position:relative;inset:auto;min-height:0;margin:0 -12px}.stage-bottom{bottom:0;justify-content:flex-end}
 .instrument{padding:0 16px;margin-top:12px}
 fieldset{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 8px;row-gap:14px;border-radius:12px}
 .finish-control{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:12px;padding:0 8px}
 .control-caption{margin:0}.presets{flex:1;gap:6px}.presets button{flex:1;flex-direction:row;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:6px;font-size:12px}.swatch{width:22px;height:22px}
 .parameter{padding:0 8px}.turn-control{grid-column:1/-1;grid-row:3}.turn-control .rotation-actions{justify-content:space-between}.turn-control input{width:100%}
 footer{display:block;margin-top:12px;padding:0 20px 16px}footer p{display:none}#render-state{text-align:left;display:block;max-width:none;font-size:12px}
 .contact-shadow{width:56%;top:85%}
}
@media(max-width:360px){header{padding:0 16px}.stage{margin:0 16px}.instrument{padding:0 12px}.finish-control{gap:8px}.presets{gap:4px}.presets button{font-size:11px;gap:4px;padding:5px}.swatch{width:20px;height:20px}.parameter{padding:0 6px}.parameter:not(.turn-control) label{display:block}.parameter:not(.turn-control) output{display:block;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}button:active:not(:disabled){transform:none}}

/* BEGIN MATERIAL EMBED */
.embedded header,.embedded #finish-description{display:none}
.embedded footer{justify-content:flex-end;margin-top:8px;padding-bottom:12px}
.embedded #render-state{max-width:100%;font-size:11px}
@media(min-width:761px){.embedded .stage{height:calc(100svh - 190px);min-height:300px;max-height:none}}
/* END MATERIAL EMBED */