:root{
  --ink:#16171a; --ink-2:#1e2024; --ink-3:#26282d; --line:#2c2f35; --text:#e9e7e2; --muted:#9a9790;
  --stone:#f1ede4; --accent:#c9c4b8;
  font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
.shell{max-width:1280px;margin:0 auto;padding:24px 24px 72px}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.lockup{display:flex;align-items:center;gap:14px;min-width:0}
.make-mark{font-size:20px;font-weight:650;letter-spacing:-.02em}
.sep{width:1px;height:22px;background:var(--line)}
.brand{height:22px;width:auto;display:block}
.project{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.top-actions{display:flex;gap:8px}
.ghost{appearance:none;border:1px solid var(--line);background:transparent;border-radius:4px;padding:0 14px;min-height:44px;font-size:13px;cursor:pointer}
.ghost:hover{border-color:var(--accent)}

.work{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;margin-top:24px}
.stage{position:relative;background:var(--stone);border-radius:6px;overflow:hidden;align-self:start}
.frame{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;transition:transform .9s cubic-bezier(.2,.7,.1,1);transform-origin:50% 50%}
.frame.dragging{transition:none}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.mark{position:absolute;aspect-ratio:153/230;transform:translate(-50%,0) rotate(var(--rot,0deg));transform-origin:50% 0;
  cursor:grab;touch-action:none;outline:none;
  filter:drop-shadow(0 .8px .4px rgba(0,0,0,.6)) drop-shadow(0 0 .6px rgba(0,0,0,.45))}
.mark:active{cursor:grabbing}
.mark:focus-visible{outline:1px dashed rgba(201,196,184,.8);outline-offset:3px}
.helix{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,0,0,.08)}
.progress i{display:block;height:100%;width:0;background:#3a3c41}
.stage-hint{position:absolute;left:14px;bottom:12px;font-size:12px;color:#6d6a63;pointer-events:none}

.panel{display:flex;flex-direction:column;gap:22px}
.label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1px solid var(--line);background:var(--ink-2);font-size:14px;
  padding:10px 14px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px}
.chip[aria-checked="true"]{border-color:var(--accent);background:var(--ink-3)}
.chip:disabled{opacity:.4;cursor:default}
.chip .sw{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}
.dials{display:flex;flex-direction:column;gap:14px}
.dial{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.dial label{font-size:14px}
.dial output{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.dial input[type=range]{grid-column:1/-1;width:100%;height:28px;accent-color:#d8d4ca;cursor:pointer}
.controls{display:flex;gap:8px}
.ctl{flex:1;appearance:none;border:1px solid var(--line);background:transparent;font-size:13px;
  padding:10px 0;border-radius:4px;cursor:pointer;min-height:44px;letter-spacing:.04em}
.ctl.play{background:var(--text);color:var(--ink);border-color:var(--text)}
.caption{color:var(--muted);font-size:14px;line-height:1.55}

.spec,.order{margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.spec-lede{color:var(--muted);margin-top:8px;max-width:680px;line-height:1.55}
.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:24px}
.spec-grid>div{background:var(--ink-2);padding:18px}
.spec-grid dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.spec-grid dd{font-size:15px;line-height:1.5}
.files{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.file{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:10px 14px 10px 10px;font-size:14px}
.swatch{width:44px;height:52px;border-radius:4px;display:grid;place-items:center;padding:6px}
.swatch.dark{background:#f1ede4}.swatch.light{background:#3a3c41}
/* Helix crop of the real logo file: x 0..152, y 2..231 of 766x232. */
.emblem{position:relative;display:block;height:100%;aspect-ratio:153/230;overflow:hidden}
.emblem img{position:absolute;left:0;top:-.87%;width:500.65%;height:auto;max-width:none;max-height:none}

.order-form{margin-top:22px;display:flex;flex-direction:column;gap:18px;max-width:880px}
.sizes{border:0}
.sizes legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.size-row{display:flex;flex-wrap:wrap;gap:10px}
.size{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.size input{width:72px}
.order-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.order-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
input[type=date],input[type=email],input[type=number],select,textarea{background:var(--ink-2);border:1px solid var(--line);border-radius:4px;padding:10px 12px;min-height:44px;color:var(--text)}
textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.order-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.primary{appearance:none;border:1px solid var(--text);background:var(--text);color:var(--ink);border-radius:4px;padding:0 20px;min-height:44px;font-weight:600;cursor:pointer}
.primary:disabled{opacity:.5;cursor:default}
.order-status{color:var(--muted);font-size:14px}

@media (max-width:900px){
  .work{grid-template-columns:1fr}
  .spec-grid,.order-grid{grid-template-columns:1fr}
  .project{display:none}
  .top{flex-wrap:wrap}
}