:root { color-scheme: light; --black:#0a0a0a; --white:#fff; --gray:#747474; --line:#dedede; }
* { box-sizing:border-box; }
html,body { height:100%; overflow:hidden; }
body { margin:0; background:var(--white); color:var(--black); font:14px/1.5 Arial, Helvetica, sans-serif; }
.app-shell { height:100dvh; overflow:hidden; display:grid; grid-template-columns:minmax(300px, 370px) 1fr; }
.controls { min-height:0; padding:40px; display:flex; flex-direction:column; gap:28px; overflow:hidden; border-right:1px solid var(--line); }
.eyebrow,.viewer-toolbar { margin:0; color:var(--gray); letter-spacing:.16em; font-size:10px; font-weight:700; }
h1 { margin:6px 0 12px; font-size:38px; font-weight:500; letter-spacing:-.045em; }
.intro,.muted { color:var(--gray); }
.intro { max-width:290px; margin:0; }
.field { display:block; margin-bottom:20px; }
.field-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:10px; }
.value { font-variant-numeric:tabular-nums; }
input[type=range] { width:100%; height:2px; margin:8px 0; appearance:none; background:var(--line); accent-color:var(--black); }
input[type=range]::-webkit-slider-thumb { width:14px; height:14px; appearance:none; border-radius:50%; background:var(--black); }
.bounds { display:flex; justify-content:space-between; color:#999; font-size:10px; }
.settings-title { margin:0 0 18px; padding-bottom:9px; border-bottom:1px solid var(--line); color:var(--gray); font-size:10px; line-height:1; letter-spacing:.16em; text-transform:uppercase; }
.coupler-title { margin-top:28px; }
#generator-form { min-height:0; flex:1; display:flex; flex-direction:column; }
.settings-scroll { min-height:0; flex:1; overflow-y:auto; overscroll-behavior:contain; padding-right:5px; scrollbar-width:thin; }
button,.download { display:block; width:100%; border:1px solid var(--black); padding:13px; background:var(--black); color:var(--white); font:700 11px/1 Arial,sans-serif; letter-spacing:.09em; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; }
button:disabled { opacity:.35; cursor:wait; }
.error { min-height:24px; color:#b00020; font-size:12px; }
.job-card { padding:16px; border:1px solid var(--line); background:rgba(255,255,255,.96); box-shadow:0 8px 30px rgba(0,0,0,.08); }
.job-card p { margin:8px 0 0; }
.status-row { display:flex; align-items:center; gap:9px; }
#status-dot { width:7px; height:7px; border-radius:50%; background:var(--black); }
.job-card.is-active #status-dot { animation:status-pulse 1.15s ease-in-out infinite; }
.download { margin-top:16px; }
.geometry-warning { display:flex; flex-direction:column; gap:4px; margin-top:14px; padding:11px 12px; border-left:3px solid var(--black); background:#f1f1f1; color:#4e4e4e; font-size:11px; line-height:1.45; }
.geometry-warning strong { color:var(--black); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.hidden { display:none !important; }
.viewer-panel { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:#fafafa; }
.viewer-toolbar { height:64px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
select {
  min-width:190px;
  appearance:none;
  color:var(--black);
  border:1px solid var(--black);
  border-radius:0;
  padding:10px 38px 10px 13px;
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .15s,color .15s;
}
select:hover:not(:disabled),select:focus-visible { background-color:var(--black); color:var(--white); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E"); }
select:focus-visible { outline:2px solid var(--black); outline-offset:2px; }
select:disabled { color:#aaa; border-color:#ccc; background-color:#f5f5f5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3C/svg%3E"); cursor:not-allowed; }
#viewer { position:relative; flex:1; min-height:0; overflow:hidden; background:#fafafa; }
#viewer canvas { display:block; width:100%; height:100%; }
.viewer-actions { position:absolute; z-index:5; left:20px; bottom:20px; width:min(380px,calc(100% - 40px)); display:flex; flex-direction:column; gap:10px; }
#generate-button { box-shadow:0 8px 30px rgba(0,0,0,.12); }
#empty-state { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; color:#999; font-size:12px; }
.wheel-icon { width:84px; height:84px; border:1px solid #bbb; border-radius:50%; position:relative; }
.wheel-icon::after { content:""; position:absolute; inset:27px; border:1px solid #bbb; border-radius:50%; }
.is-generating .wheel-icon { animation:wheel-pulse 1.6s ease-in-out infinite; }
.is-generating .wheel-icon::after { animation:wheel-pulse 1.6s .3s ease-in-out infinite; }
@keyframes wheel-pulse { 0%,100%{transform:scale(1);opacity:.45} 50%{transform:scale(1.12);opacity:1} }
@keyframes status-pulse { 0%,100%{transform:scale(1);opacity:.45;box-shadow:0 0 0 0 rgba(10,10,10,.2)} 50%{transform:scale(1.45);opacity:1;box-shadow:0 0 0 5px rgba(10,10,10,0)} }
@media(prefers-reduced-motion:reduce){.is-generating .wheel-icon,.is-generating .wheel-icon::after,.job-card.is-active #status-dot{animation:none}}
@media(max-width:800px){html,body{height:auto;overflow:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible;grid-template-columns:1fr}.controls{padding:32px 24px;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}#generator-form{display:block}.settings-scroll{overflow:visible;padding-right:0}.viewer-panel{min-height:65vh}}