@font-face{
  font-family:FlashHeading;
  src:url('assets/heading.ttf') format('truetype');
  font-weight:400;font-display:block;
}

:root{
  /* Orriq brand */
  --obsidian:#000;
  --cream:#f5f5f7;
  --fog:#8a8c94;
  --cyan:#2dd4bf;
  --violet:#a855f7;

  /* dark clay surfaces */
  --clay:#0f1014;
  --clay-hi:#16181e;
  --clay-lo:#0a0b0e;
  --sunken:#090a0d;

  /* clay recipe: cast shadow down-right, cool lift up-left, inner rim */
  --lift: 16px 20px 40px rgba(0,0,0,.72), -10px -12px 28px rgba(255,255,255,.035);
  --lift-sm: 8px 10px 20px rgba(0,0,0,.6), -5px -6px 14px rgba(255,255,255,.03);
  --press: inset 7px 8px 16px rgba(0,0,0,.72), inset -6px -7px 14px rgba(255,255,255,.035);
  --rim: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -2px 3px rgba(0,0,0,.4);

  color-scheme:dark;
}

*{box-sizing:border-box}



body{
  margin:0;min-height:100vh;
  /* brand glow: teal top right, violet bottom left, sized to the document */
  background:
    radial-gradient(900px 700px at 100% 0%, rgba(45,212,191,.16) 0%, transparent 60%),
    radial-gradient(860px 680px at 0% 100%, rgba(168,85,247,.14) 0%, transparent 60%),
    var(--obsidian);
  background-repeat:no-repeat;
  color:var(--cream);
  font-family:Geist,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */

header{
  padding:26px 5% 12px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}

.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--cream);
}

.mark{
  display:grid;place-items:center;
  width:46px;height:46px;
  background:var(--clay-hi);
  border-radius:16px;
  box-shadow:var(--lift-sm), var(--rim);
}
.mark svg{width:22px;height:22px;color:var(--cyan)}
.mark .stroke-current{stroke:currentColor;stroke-width:2}
.mark .fill-current{fill:currentColor}

.wordmark{
  font-size:20px;font-weight:600;letter-spacing:-.02em;
  text-transform:lowercase;color:var(--cream);
}

.product{
  font-size:13px;font-weight:500;letter-spacing:.01em;
  color:var(--fog);
  padding-left:14px;margin-left:2px;
  border-left:1px solid rgba(245,245,247,.14);
}

.badge{
  background:var(--clay);
  border-radius:999px;
  padding:11px 20px;
  font-size:12px;font-weight:500;letter-spacing:.01em;
  color:var(--fog);
  box-shadow:var(--lift-sm), var(--rim);
}

/* ---------- layout ---------- */

main{
  max-width:1280px;margin:auto;
  display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(28px,4vw,64px);
  padding:34px 5% 72px;
  align-items:start;
}

/* ---------- intro ---------- */

.intro{margin-bottom:38px;padding-left:4px}

.eyebrow{
  display:inline-block;
  background:rgba(45,212,191,.1);
  color:var(--cyan);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;
  box-shadow:var(--lift-sm), inset 0 0 0 1px rgba(45,212,191,.28);
}

h1{
  font-family:Geist,ui-sans-serif,system-ui,Arial,sans-serif;
  font-size:clamp(38px,4.3vw,56px);
  font-weight:600;
  line-height:1.05;letter-spacing:-.035em;
  color:var(--cream);
  margin:22px 0 14px;
}

p{line-height:1.6;margin:0}
.intro>p{color:var(--fog);font-size:17px}

/* ---------- clay slabs ---------- */
/* plain sections, NOT fieldset/legend: a rendered <legend> is laid out against the
   fieldset's border box, so it ignored the slab's 30px top padding and sat on the
   top rim with a dead band underneath. */

.slab{
  border:0;margin:0 0 26px;
  padding:26px clamp(20px,2.6vw,32px) 22px;
  background:var(--clay);
  border-radius:34px;
  box-shadow:var(--lift), var(--rim);
}

.legend{
  display:flex;align-items:center;gap:14px;
  font-size:16.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--cream);
  padding:0;margin:0 0 16px;
}

.step{
  display:grid;place-items:center;
  width:34px;height:34px;
  background:var(--clay-hi);color:var(--cyan);
  border-radius:12px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  box-shadow:var(--lift-sm), var(--rim);
}

/* ---------- choices ---------- */
/* Plain rows on the slab itself. No card, no backdrop, no shadow behind each
   option: the slab is already a raised surface and stacking a second one inside
   it read as a button. Selection is carried by the dial and the title weight. */

.choices{display:grid;grid-template-columns:1fr;gap:4px;margin:0 0 2px}

.choice{
  display:flex;align-items:center;gap:14px;
  cursor:pointer;
  padding:9px 2px;
  margin:0;                 /* .choice is a <label>: kill the global label margin */
  background:none;border:0;border-radius:0;box-shadow:none;
}

/* a real radio dial, drawn in CSS: ring when empty, cyan core when chosen */
.choice input{
  appearance:none;-webkit-appearance:none;
  flex:0 0 auto;margin:0;
  width:21px;height:21px;border-radius:50%;
  background-color:var(--sunken);
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 2px rgba(245,245,247,.22), inset 2px 3px 6px rgba(0,0,0,.6);
  cursor:pointer;
  transition:box-shadow .16s ease;
}
.choice:hover input{box-shadow:inset 0 0 0 2px rgba(245,245,247,.4), inset 2px 3px 6px rgba(0,0,0,.6)}
.choice input:checked{
  background-image:radial-gradient(circle at 50% 50%, var(--cyan) 0 5.5px, transparent 6px);
  box-shadow:inset 0 0 0 2px var(--cyan);
}

.choice .copy{min-width:0}
.choice strong{
  display:block;font-size:15px;font-weight:600;line-height:1.35;
  color:#b6bac0;transition:color .16s ease;
}
.choice small{display:block;font-size:12.5px;line-height:1.45;color:var(--fog)}
.choice:hover strong{color:var(--cream)}
.choice:has(input:checked) strong{color:var(--cream)}

/* ---------- fields ---------- */

label{display:block;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--cream);margin-bottom:10px}

input:not([type=radio]):not([type=range]):not([type=file]),
textarea,select{
  font:inherit;font-size:15px;width:100%;
  padding:16px 18px;margin-bottom:22px;
  color:var(--cream);
  background:var(--sunken);
  border:0;border-radius:18px;
  box-shadow:var(--press);
  transition:box-shadow .16s ease;
}
/* Things you type into are sunken; things you press or open are raised.
   The select opens a menu, so it gets the same raised clay as the option rows
   rather than the pressed treatment of the text fields. */
.selectwrap{position:relative;margin-bottom:22px}
.selectwrap select{
  appearance:none;-webkit-appearance:none;
  margin-bottom:0;padding-right:54px;
  cursor:pointer;
  text-overflow:ellipsis;
  font-weight:500;
  background:var(--clay-hi);
  box-shadow:var(--lift-sm), var(--rim);
  transition:transform .14s ease, box-shadow .16s ease;
}
.selectwrap:hover select{transform:translateY(-1px)}
.selectwrap select:focus{
  box-shadow:var(--lift-sm), var(--rim), inset 0 0 0 2px var(--cyan);
}
.selectwrap::after{
  content:"";position:absolute;pointer-events:none;
  right:25px;top:50%;
  width:9px;height:9px;margin-top:-7px;
  border-right:2px solid var(--fog);
  border-bottom:2px solid var(--fog);
  border-radius:1px;
  transform:rotate(45deg);
  transition:border-color .16s ease;
}
.selectwrap:hover::after,
.selectwrap:focus-within::after{border-color:var(--cyan)}
textarea{resize:vertical;min-height:110px;line-height:1.55}
::placeholder{color:#5f636b}

input:focus,textarea:focus,select:focus{
  outline:none;
  box-shadow:var(--press), 0 0 0 2px var(--cyan);
}
button:focus-visible,.upload:focus-within{
  outline:2px solid var(--cyan);outline-offset:3px;
}
/* keyboard only: :focus-within would draw this box on every mouse click too,
   which reads as a stray backdrop now the rows have no card behind them */
.choice:has(input:focus-visible){
  outline:2px solid var(--cyan);outline-offset:4px;border-radius:12px;
}

.labelrow{display:flex;justify-content:space-between;align-items:baseline}
.labelrow small{font-size:12px;font-weight:500;color:var(--fog)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- upload ---------- */

.upload{
  display:block;cursor:pointer;text-align:center;
  padding:30px 18px 24px;margin-bottom:22px;
  background:var(--sunken);
  border-radius:24px;
  box-shadow:var(--press);
}
.upload b{font-size:15px;font-weight:600;color:var(--cream)}
.upload small{display:block;color:var(--fog);font-weight:400;font-size:12px;margin:10px 0 0}
.upload input{
  display:block;margin:16px auto 0;font-size:12px;max-width:100%;
  color:var(--fog);
}
.upload input::file-selector-button{
  font:inherit;font-weight:600;
  border:0;border-radius:12px;padding:10px 16px;margin-right:12px;
  background:var(--clay-hi);color:var(--cream);cursor:pointer;
  box-shadow:var(--lift-sm), var(--rim);
}

#position{
  appearance:none;-webkit-appearance:none;
  width:100%;height:16px;margin:0 0 20px;
  background:var(--sunken);border-radius:999px;
  box-shadow:var(--press);
}
#position::-webkit-slider-thumb{
  appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--cyan);cursor:grab;
  box-shadow:0 6px 14px rgba(0,0,0,.7), inset 0 2px 2px rgba(255,255,255,.35);
}
#position::-moz-range-thumb{
  width:28px;height:28px;border:0;border-radius:50%;
  background:var(--cyan);cursor:grab;
  box-shadow:0 6px 14px rgba(0,0,0,.7);
}

.textbutton{
  font:inherit;font-size:13px;font-weight:600;
  background:var(--clay-hi);color:var(--cream);
  border:0;border-radius:14px;padding:11px 18px;margin-bottom:12px;
  cursor:pointer;box-shadow:var(--lift-sm), var(--rim);
}
.textbutton:active{box-shadow:var(--press)}

.hint,#filename{font-size:13px;color:var(--fog);overflow-wrap:anywhere;margin:0 0 14px}

/* ---------- locked note ---------- */

.locked{
  padding:24px 28px;
  background:linear-gradient(150deg, rgba(45,212,191,.08), rgba(168,85,247,.07)), var(--clay);
  border-radius:28px;
  box-shadow:var(--lift), var(--rim);
}
.locked b{
  display:block;font-size:15px;font-weight:600;
  color:var(--cyan);margin-bottom:8px;
}
.locked p{font-size:13.5px;line-height:1.6;color:var(--fog)}

/* ---------- preview ---------- */

.preview{
  position:sticky;top:26px;align-self:start;
  padding:26px 28px 30px;
  background:var(--clay);
  border-radius:38px;
  box-shadow:var(--lift), var(--rim);
}

.previewhead{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);margin-bottom:22px;
}
.previewhead span:first-child{
  background:rgba(45,212,191,.1);color:var(--cyan);
  padding:8px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(45,212,191,.28);
}

/* No radius here: the story artwork has its own square lime frame, and a
   rounded wrapper with overflow:hidden chops its corners off. */
.canvaswrap{
  width:min(100%,318px);margin:auto;
  line-height:0;
  box-shadow:0 26px 50px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
}
canvas{width:100%;height:auto}

.export{width:min(100%,340px);margin:28px auto 0;text-align:center}

.primary{
  display:block;width:100%;
  font:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;
  color:#04110f;background:var(--cyan);
  border:0;border-radius:22px;padding:20px;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(45,212,191,.22), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .14s ease, box-shadow .14s ease;
}
.primary:hover{transform:translateY(-2px)}
.primary:active{transform:none;box-shadow:inset 4px 5px 10px rgba(0,0,0,.28)}
.primary:disabled{opacity:.55;cursor:wait;transform:none}

#format{font-size:12px;font-weight:500;color:var(--fog);margin:14px 0 0}
#status{font-size:13.5px;font-weight:500;color:var(--cyan);margin:8px 0 0}

.note{
  font-size:12px;text-align:center;color:var(--fog);
  line-height:1.8;margin:22px 0 0;
}

/* ---------- footer ---------- */

footer{
  max-width:1280px;margin:auto;
  padding:8px 5% 46px;
  display:flex;justify-content:space-between;gap:16px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fog);
}

/* the field rule above is more specific than this one, hence !important:
   the last control in a slab must not stack its margin on the slab padding */
.slab > *:last-child,
.slab > *:last-child > input,
.slab > *:last-child > select,
.slab > *:last-child > textarea{margin-bottom:0!important}

[hidden]{display:none!important}

/* ---------- responsive ---------- */

@media(max-width:900px){
  main{grid-template-columns:1fr;gap:30px;padding:26px 6% 56px}
  .preview{position:static}
  header{padding:20px 6% 6px}
  .badge{display:none}
  .canvaswrap{max-width:300px}
  footer{padding:0 6% 40px;flex-direction:column;gap:6px}
}

@media(max-width:520px){
  .twocol{grid-template-columns:1fr}
  .slab{border-radius:28px;padding:24px 20px 20px}
  .product{font-size:12px;padding-left:12px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}