@font-face{font-family:Instrument;src:url('/fonts/InstrumentSans/InstrumentSans-Variable.woff2')} 
:root{color-scheme:dark;font-family:Instrument,Arial,sans-serif;color:#f8f8f6;background:#0c0d0e;font-size:15px}
*{box-sizing:border-box;letter-spacing:0}body{margin:0}.app{padding:24px;max-width:760px;margin:auto}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #2c3238;background:#15171a;border-radius:8px;padding:12px}button:focus-visible,input:focus-visible{outline:2px solid #c6f23b;outline-offset:3px}button:hover{border-color:#a78bfa}button:disabled{cursor:wait;opacity:.7}.top{display:flex;align-items:center;gap:12px;margin-bottom:22px}.top h1{font-size:23px;margin:0}.top small{color:#a2a8ae}.top img{background:#f8f8f6;border-radius:6px;padding:4px}.demo-label{margin-left:auto;color:#a2a8ae;font-size:12px}.top button{font-size:24px;padding:4px 10px}.target{border:1px solid #2c3238;border-left:4px solid #c6f23b;background:#15171a;border-radius:8px;padding:16px}.target div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;margin:5px 0}.target span{color:#a2a8ae}.target strong{font-weight:500;overflow-wrap:anywhere}.look-row{display:flex;gap:8px;margin:16px 0}.looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:1}.looks button{display:grid;justify-items:center;gap:8px;min-height:88px}.looks button[aria-pressed=true]{background:#242033;border-color:#a78bfa}.look-frame{display:flex;width:48px;height:35px;background:#2c3238;border-radius:5px;align-items:end;justify-content:center;padding:7px}.look-frame i{width:28px;height:3px;background:#f8f8f6;border-radius:2px}.boxed i{box-shadow:0 0 0 4px #080a09}.large i{height:6px}.shadow{display:grid;align-content:center;justify-items:center;gap:8px;font-size:13px}.shadow input{width:19px;height:19px;accent-color:#a78bfa}.preview{min-height:100px;display:grid;place-items:center;padding:18px;background:#202925;border:1px solid #39473f;border-radius:8px;margin-bottom:16px;text-align:center}.preview span{font-size:20px;font-weight:700;overflow-wrap:anywhere}.preview.shadow-on span{text-shadow:0 2px 4px #000}.preview.boxed span{background:#080a09;border-radius:4px;padding:6px 10px}.preview.large span{font-size:27px}.primary,.secondary{width:100%;margin-bottom:10px;font-weight:700}.primary{background:#a78bfa;color:#111;border-color:#a78bfa}.secondary{border-color:#7964a7;background:#1c1f23;font-weight:500}.status{border-left:4px solid #c6f23b;background:#15171a;padding:12px;border-radius:6px;color:#d0d4cc;min-height:43px}.results header{display:flex;justify-content:space-between;align-items:center}.results h2{font-size:16px}.results header span{color:#a2a8ae;font-size:13px}.results ol{padding:6px;margin:0;list-style:none;border:1px solid #2c3238;border-radius:8px}.results li{display:grid;grid-template-columns:65px minmax(0,1fr);gap:6px;align-items:center;border-radius:4px}.results li.selected{background:#242033}.results li button{border:0;background:transparent;color:#a78bfa;padding:10px 4px;font-size:13px}.results input{width:100%;min-width:0;color:#f8f8f6;background:transparent;border:0;padding:10px 4px;font-size:14px}
.results textarea{font:inherit;font-size:14px;line-height:1.4;width:100%;min-width:0;height:62px;resize:none;color:#f8f8f6;background:transparent;border:0;padding:10px 4px}.results textarea:focus-visible{outline:2px solid #c6f23b;outline-offset:-2px}
@media(max-width:450px){.app{padding:14px}.top h1{font-size:20px}.target div{grid-template-columns:70px minmax(0,1fr);font-size:13px}.looks button{padding:8px}.preview span{font-size:18px}.preview.large span{font-size:23px}}
@media(max-width:450px){
  .app{padding:16px 12px}
  .top{gap:8px;margin-bottom:16px}
  .top>div{min-width:0;flex:1}
  .top h1{font-size:17px;line-height:1.2}
  .top .demo-label{display:none}
  .top button{min-width:44px;min-height:44px}
  .target{padding:12px}
  .target div{grid-template-columns:74px minmax(0,1fr);gap:8px}
  .look-row{flex-wrap:wrap}
  .looks{flex-basis:100%;min-width:0}
  .shadow{display:flex;min-height:44px;gap:10px}
  .preview{min-height:112px;padding:16px 12px}
  .primary,.secondary{min-height:48px;line-height:1.35;font-size:15px}
  .results li{grid-template-columns:58px minmax(0,1fr)}
  .results li button{min-height:44px}
  .results textarea{font-size:16px;height:72px}
}