/* ============ SHIP INTERIOR ============
   The designer is the engraving bay of a ship: dark hull panels, console keys, LED indicators,
   and the card editor is a riveted viewport onto space. Loaded after styles.css and layers.css. */
:root{
  --hull:#06080e;--panel:#0d1019;--panel2:#131826;--inset:#080a11;
  --edge:#222a3d;--edge2:#364059;--edge3:#4a5677;
  --ink:#e8eaf0;--dim:#8b92a5;--faint:#5d6580;
  --cy:#19d3ff;--cy2:#7fe7ff;--mg:#ff2bd6;--am:#ffb347;--ok:#4dffb0;--red:#ff4d5e;
  --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace;--disp:'Unbounded','Space Mono',sans-serif;
}
html{background:var(--hull);color-scheme:dark}
body{background:radial-gradient(140% 90% at 50% -15%,#141a33 0%,#0a0d18 45%,var(--hull) 80%) fixed;color:var(--ink);font-family:var(--mono);font-size:14px;min-height:100vh}
:root{color:var(--ink);background:var(--hull)}
::selection{background:rgba(25,211,255,.3);color:#fff}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.artwork:focus-visible{outline:2px solid var(--cy);outline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#070910}::-webkit-scrollbar-thumb{background:#262e44;border-radius:6px;border:2px solid #070910}

/* ---------- power-on ---------- */
@keyframes powerOn{0%{opacity:0;filter:brightness(2.2)}8%{opacity:.9}14%{opacity:.2}22%{opacity:1;filter:brightness(1.6)}34%{opacity:.55}48%,100%{opacity:1;filter:none}}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes sweep{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes blipFlash{0%{box-shadow:0 0 0 0 rgba(25,211,255,.9)}100%{box-shadow:0 0 0 14px rgba(25,211,255,0)}}
/* played once, at load only (the class is removed after 2 s) */
.booting .header{animation:powerOn 1s .0s both}.booting .controls{animation:powerOn 1.1s .15s both}.booting .studio .ship-window{animation:powerOn 1.3s .3s both}

/* ---------- top bar ---------- */
.header{position:relative;height:68px;padding:0 28px;background:linear-gradient(180deg,#121726 0%,#0a0d17 100%);border-bottom:1px solid #000;box-shadow:0 1px 0 var(--edge),0 12px 34px rgba(0,0,0,.65);gap:20px}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--cy),var(--mg),var(--cy),transparent);background-size:200% 100%;animation:sweep 7s linear infinite;opacity:.7}
.brand{gap:14px}
.brand-icon{width:38px;height:38px;border-radius:8px;background:linear-gradient(145deg,#1a2136,#0b0e17);border:1px solid var(--edge3);color:var(--cy);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 16px rgba(25,211,255,.22)}
.brand h1{font-family:var(--disp);font-weight:500;font-size:14px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);display:flex;flex-direction:column;gap:3px;line-height:1}
.brand h1 small{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.32em;color:var(--cy2)}
.ship-status{display:flex;gap:22px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.ship-status span{display:inline-flex;align-items:center;gap:8px}
.led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok),0 0 2px #fff inset}
.led.cy{background:var(--cy);box-shadow:0 0 8px var(--cy),0 0 2px #fff inset}.led.am{background:var(--am);box-shadow:0 0 8px var(--am)}.led.blink{animation:ledPulse 1.6s infinite}
.ship-right{display:flex;align-items:center;gap:18px}
.ship-clock{font-size:11px;letter-spacing:.18em;color:var(--cy2);font-variant-numeric:tabular-nums}
.bridge-link{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid var(--edge3);border-radius:5px;padding:8px 12px;background:linear-gradient(180deg,#171d2f,#0d101b);transition:border-color .15s,box-shadow .15s}
.bridge-link:hover{border-color:var(--cy);box-shadow:0 0 14px rgba(25,211,255,.3)}

/* ---------- layout ---------- */
.workspace{min-height:calc(100vh - 68px);grid-template-columns:350px minmax(0,1fr)}
.controls{position:relative;padding:30px 26px 34px;background:linear-gradient(180deg,#0e111b 0%,#0a0d15 100%);border-right:1px solid #000;box-shadow:inset -1px 0 0 var(--edge),inset 1px 0 0 rgba(255,255,255,.03)}
.controls::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:radial-gradient(circle at 11px 11px,#475270 0 2px,#161b29 2.6px 4px,transparent 4.5px) left top/16px 16px no-repeat,
  radial-gradient(circle at 5px 11px,#475270 0 2px,#161b29 2.6px 4px,transparent 4.5px) right top/16px 16px no-repeat,
  radial-gradient(circle at 11px 5px,#475270 0 2px,#161b29 2.6px 4px,transparent 4.5px) left bottom/16px 16px no-repeat,
  radial-gradient(circle at 5px 5px,#475270 0 2px,#161b29 2.6px 4px,transparent 4.5px) right bottom/16px 16px no-repeat}
.controls::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
.controls>*{position:relative;z-index:1}
.studio{background:transparent;padding:26px 44px 40px}
.divider{height:1px;margin:26px 0;background:repeating-linear-gradient(90deg,var(--edge2) 0 6px,transparent 6px 11px)}

/* ---------- panel headings, text ---------- */
.section-title{gap:12px;margin-bottom:20px}
.section-title h2{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.step{font-size:10px;letter-spacing:.14em;color:var(--cy);border:1px solid rgba(25,211,255,.4);background:rgba(25,211,255,.07);padding:3px 6px;border-radius:3px}
.step::before{content:"SYS-"}
.section-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge3),transparent)}
.help,.field-note,.card-caption,.interaction-hint{color:var(--dim);font-size:11.5px;line-height:1.7}
.interaction-hint{letter-spacing:.06em}
label,.group-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b5bbcc;font-weight:400}
.eyebrow{font-size:10px;letter-spacing:.34em;color:var(--cy);font-weight:700}
.eyebrow::before{content:"\25C6  ";color:var(--mg)}
.studio-top h2{font-family:var(--disp);font-weight:500;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.status{color:var(--cy2);font-size:12px;letter-spacing:.04em;text-align:left;max-width:800px;margin:14px auto 0;min-height:18px}
.status:not(:empty)::before{content:"> ";color:var(--mg)}

/* ---------- fields ---------- */
textarea,select,.layer-text{background:var(--inset);border:1px solid var(--edge2);color:var(--ink);border-radius:6px;font-family:var(--mono);font-size:13px;box-shadow:inset 0 2px 8px rgba(0,0,0,.65)}
textarea{line-height:1.65;padding:13px}
textarea:focus,select:focus,.layer-text:focus{border-color:var(--cy);box-shadow:inset 0 2px 8px rgba(0,0,0,.65),0 0 0 1px var(--cy),0 0 18px rgba(25,211,255,.22);outline:none}
::placeholder{color:var(--faint)}
select{appearance:none;-webkit-appearance:none;padding:12px 38px 12px 12px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2319d3ff' stroke-width='1.8'/></svg>");background-repeat:no-repeat;background-position:right 13px center}
select option{background:#0d1019;color:var(--ink)}

/* ---------- keys, switches ---------- */
.segmented{background:var(--inset);border:1px solid var(--edge);border-radius:8px;padding:3px;gap:3px;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.segmented button{color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:5px;padding:9px 8px;transition:color .15s,background .15s,box-shadow .15s}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-pressed=true]{background:linear-gradient(180deg,#1d2640,#121828);color:var(--cy2);box-shadow:inset 0 0 0 1px rgba(25,211,255,.5),0 0 14px rgba(25,211,255,.18)}
.segmented button[aria-pressed=true]::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy);margin-right:7px;vertical-align:1px}
.segmented button:active{transform:translateY(1px)}

.primary{position:relative;overflow:hidden;gap:10px;border:1px solid var(--cy);border-radius:5px;background:linear-gradient(180deg,rgba(25,211,255,.26),rgba(25,211,255,.07));color:#eafcff;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:14px 10px;box-shadow:inset 0 0 0 1px rgba(25,211,255,.12),0 0 20px rgba(25,211,255,.28);transition:box-shadow .2s,transform .08s}
.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s}
.primary:hover{background:linear-gradient(180deg,rgba(25,211,255,.34),rgba(25,211,255,.1));box-shadow:inset 0 0 0 1px rgba(25,211,255,.2),0 0 28px rgba(25,211,255,.42)}
.primary:hover::after{transform:translateX(130%)}
.primary:active{transform:translateY(1px)}
.primary span{font-size:16px;line-height:16px;color:var(--cy2)}

.tpl-open{border:1px solid var(--edge3);border-left:3px solid var(--mg);border-radius:6px;background:linear-gradient(135deg,#171d30,#0d111c);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.45);transition:border-color .15s,box-shadow .15s,transform .08s;margin-bottom:26px}
.tpl-open:hover{background:linear-gradient(135deg,#1c2440,#101524);border-color:var(--cy);box-shadow:0 0 22px rgba(25,211,255,.25),0 8px 22px rgba(0,0,0,.45)}
.tpl-open:active{transform:translateY(1px)}
.tpl-open small{color:var(--dim);letter-spacing:.04em}
.tpl-open-count{font-family:var(--disp);color:var(--cy);border-right:1px solid var(--edge3);text-shadow:0 0 14px rgba(25,211,255,.6)}

.style-grid{gap:9px}
.style-grid button,.font-chips button,.add-text,.tool-button,.text-button{position:relative;background:linear-gradient(180deg,#151b2c,#0c0f19);border:1px solid var(--edge2);color:#cfd4e2;font-family:var(--mono);font-size:12px;border-radius:6px;box-shadow:0 3px 0 #04050a,inset 0 1px 0 rgba(255,255,255,.07);transition:border-color .15s,color .15s,box-shadow .15s,transform .08s}
.style-grid button:hover,.font-chips button:hover,.add-text:hover:not(:disabled),.tool-button:hover,.text-button:hover{border-color:var(--cy);color:#fff}
.style-grid button:active,.font-chips button:active,.add-text:active,.tool-button:active,.text-button:active{transform:translateY(2px);box-shadow:0 1px 0 #04050a,inset 0 1px 0 rgba(255,255,255,.04)}
.style-grid button[aria-pressed=true],.font-chips button[aria-pressed=true]{color:var(--cy2);border-color:var(--cy);background:linear-gradient(180deg,#14304a,#0b1626);box-shadow:0 3px 0 #04050a,0 0 16px rgba(25,211,255,.3),inset 0 0 0 1px rgba(25,211,255,.18)}
.style-grid button[aria-pressed=true]::after{content:"";position:absolute;right:8px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px var(--cy)}
.style-icon{color:var(--cy)}
.add-text{border-style:dashed;color:var(--cy2);width:100%;padding:11px;letter-spacing:.1em;text-transform:uppercase;font-size:11px}
.text-button{padding:9px 13px;color:var(--dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.text-button span{font-size:15px}
.studio-top{gap:10px}

/* ---------- module slots (text layers) ---------- */
.layer{background:linear-gradient(180deg,#0c0f19,#090b13);border:1px solid var(--edge);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.layer.active{border-color:var(--cy);box-shadow:0 0 0 1px rgba(25,211,255,.4),0 0 22px rgba(25,211,255,.14);background:linear-gradient(180deg,#0f1424,#0a0d17)}
.layer-title{font-size:10px;letter-spacing:.24em;color:var(--cy2)}
.layer-title::before{content:"\25B8 ";color:var(--mg)}
.layer-del{color:var(--faint)}.layer-del:hover{color:var(--red);background:rgba(255,77,94,.12)}
.layer-size,.layer-caps{color:var(--dim);font-size:11px;letter-spacing:.1em}
.layer-caps input{accent-color:var(--cy)}
.layer-seg{background:var(--inset)}

/* ---------- sliders: a metal cap on a lit rail ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;height:22px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cy) 0 var(--p),#1a2133 var(--p) 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.8),0 0 8px rgba(25,211,255,.15)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cy) 0 var(--p),#1a2133 var(--p) 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:22px;margin-top:-8px;border-radius:3px;background:linear-gradient(90deg,#8b94ab,#e4e8f2 45%,#6c768d);border:1px solid #05060a;box-shadow:0 2px 6px rgba(0,0,0,.7),0 0 10px rgba(25,211,255,.4)}
input[type=range]::-moz-range-thumb{width:12px;height:22px;border-radius:3px;background:linear-gradient(90deg,#8b94ab,#e4e8f2 45%,#6c768d);border:1px solid #05060a;box-shadow:0 2px 6px rgba(0,0,0,.7)}
.layout-tools input{accent-color:var(--cy)}

/* ---------- cargo hatch (upload) ---------- */
.upload-zone{border:1px solid var(--edge2);border-radius:8px;background:repeating-linear-gradient(45deg,#0b0e17 0 12px,#0e1220 12px 24px);position:relative;color:var(--ink)}
.upload-zone::before{content:"";position:absolute;inset:6px;border:1px dashed var(--edge3);border-radius:5px;pointer-events:none}
.upload-zone:hover,.upload-zone.dragging{background:repeating-linear-gradient(45deg,#0d1424 0 12px,#101a2e 12px 24px);border-color:var(--cy);box-shadow:0 0 22px rgba(25,211,255,.2)}
.upload-symbol{color:var(--cy);text-shadow:0 0 14px rgba(25,211,255,.7)}
.upload-zone strong{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.upload-zone span:not(.upload-symbol){color:var(--dim)}.upload-zone small{color:var(--faint)}
.upload-zone:focus-within{outline:2px solid var(--cy)}

/* ---------- THE WINDOW ---------- */
.ship-window{position:relative;width:min(100%,860px);margin:20px auto 0;padding:26px 24px 24px;border-radius:38px;
  background:linear-gradient(145deg,#343c52 0%,#1b2030 30%,#10131e 58%,#2a3247 100%);
  box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(255,255,255,.2),inset 0 -3px 0 rgba(0,0,0,.65),inset 0 0 0 5px #0d101a,0 40px 80px rgba(0,0,0,.75),0 0 90px rgba(25,211,255,.06)}
.ship-window::before{content:"";position:absolute;inset:9px;border-radius:30px;pointer-events:none;z-index:2;
  background:radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) left top/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) right top/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) left bottom/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) right bottom/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) center top/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) center bottom/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) left center/14px 14px no-repeat,
  radial-gradient(circle,#6b7899 0 2px,#1b2030 2.6px 4.4px,transparent 5px) right center/14px 14px no-repeat}
.ship-window::after{content:"VIEWPORT 03  \00B7  EXTERIOR OPTICS";position:absolute;left:50%;top:7px;transform:translateX(-50%);font:700 8.5px var(--mono);letter-spacing:.34em;color:#76819f;white-space:nowrap;z-index:3;text-shadow:0 1px 0 #000}
.win-led{position:absolute;top:10px;width:7px;height:7px;border-radius:50%;z-index:3}
.win-led.l{left:44px;background:var(--red);box-shadow:0 0 8px var(--red);animation:ledPulse 1.8s infinite}
.win-led.r{right:44px;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:ledPulse 1.8s .9s infinite}

.card-stage{position:relative;width:100%;aspect-ratio:1.55;min-height:0;padding:0;overflow:hidden;border-radius:22px;
  background-color:#03050a;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='280'><circle cx='190.0' cy='156.7' r='1.30' fill='%23ffecd4' fill-opacity='0.58'/><circle cx='359.1' cy='53.2' r='0.97' fill='%23ffecd4' fill-opacity='0.58'/><circle cx='333.1' cy='26.4' r='0.38' fill='%23ffffff' fill-opacity='0.31'/><circle cx='250.1' cy='110.9' r='0.46' fill='%23ffffff' fill-opacity='0.77'/><circle cx='261.7' cy='232.9' r='0.35' fill='%23ffffff' fill-opacity='0.27'/><circle cx='251.8' cy='217.9' r='0.39' fill='%23ffffff' fill-opacity='0.66'/><circle cx='218.0' cy='179.3' r='0.50' fill='%23c8dcff' fill-opacity='0.71'/><circle cx='275.0' cy='113.9' r='0.55' fill='%23ffffff' fill-opacity='0.90'/><circle cx='297.3' cy='88.3' r='0.36' fill='%23ffffff' fill-opacity='0.45'/><circle cx='236.5' cy='30.2' r='0.35' fill='%23ffffff' fill-opacity='0.45'/><circle cx='402.4' cy='237.2' r='0.35' fill='%23ffffff' fill-opacity='0.40'/><circle cx='197.4' cy='274.5' r='0.43' fill='%23ffffff' fill-opacity='0.30'/><circle cx='327.0' cy='75.5' r='0.35' fill='%23c8dcff' fill-opacity='0.48'/><circle cx='318.4' cy='33.0' r='0.37' fill='%23ffffff' fill-opacity='0.32'/><circle cx='195.3' cy='136.3' r='0.73' fill='%23ffecd4' fill-opacity='0.38'/><circle cx='80.1' cy='204.9' r='0.35' fill='%23ffffff' fill-opacity='0.70'/><circle cx='165.8' cy='277.2' r='0.35' fill='%23ffecd4' fill-opacity='0.86'/><circle cx='127.7' cy='247.8' r='0.36' fill='%23ffecd4' fill-opacity='0.53'/><circle cx='269.6' cy='28.1' r='1.51' fill='%23ffffff' fill-opacity='0.40'/><circle cx='4.0' cy='170.9' r='1.04' fill='%23ffffff' fill-opacity='0.52'/><circle cx='37.8' cy='163.2' r='0.37' fill='%23ffffff' fill-opacity='0.67'/><circle cx='261.3' cy='35.6' r='0.59' fill='%23ffffff' fill-opacity='0.83'/><circle cx='363.9' cy='51.2' r='0.35' fill='%23ffecd4' fill-opacity='0.89'/><circle cx='104.8' cy='53.1' r='0.84' fill='%23ffffff' fill-opacity='0.91'/><circle cx='288.5' cy='108.7' r='0.48' fill='%23ffffff' fill-opacity='0.30'/><circle cx='43.6' cy='10.8' r='1.42' fill='%23c8dcff' fill-opacity='0.42'/><circle cx='107.9' cy='230.6' r='0.60' fill='%23ffffff' fill-opacity='0.46'/><circle cx='390.3' cy='273.6' r='0.35' fill='%23ffecd4' fill-opacity='0.59'/><circle cx='258.0' cy='78.5' r='1.28' fill='%23ffffff' fill-opacity='0.39'/><circle cx='29.0' cy='115.2' r='0.37' fill='%23ffffff' fill-opacity='0.28'/><circle cx='154.9' cy='160.2' r='0.35' fill='%23c8dcff' fill-opacity='0.50'/><circle cx='411.8' cy='183.9' r='0.75' fill='%23ffffff' fill-opacity='0.66'/><circle cx='247.7' cy='258.6' r='0.48' fill='%23ffffff' fill-opacity='0.50'/><circle cx='404.4' cy='6.0' r='0.66' fill='%23ffffff' fill-opacity='0.59'/><circle cx='133.9' cy='279.8' r='0.35' fill='%23ffffff' fill-opacity='0.63'/><circle cx='378.1' cy='206.4' r='0.77' fill='%23ffffff' fill-opacity='0.81'/><circle cx='147.8' cy='191.8' r='1.23' fill='%23c8dcff' fill-opacity='0.86'/><circle cx='396.6' cy='8.5' r='0.50' fill='%23c8dcff' fill-opacity='0.26'/><circle cx='159.3' cy='3.5' r='0.35' fill='%23ffffff' fill-opacity='0.31'/><circle cx='417.2' cy='246.3' r='0.81' fill='%23ffecd4' fill-opacity='0.52'/><circle cx='192.3' cy='129.5' r='0.54' fill='%23ffecd4' fill-opacity='0.61'/><circle cx='12.5' cy='168.4' r='0.48' fill='%23ffffff' fill-opacity='0.41'/><circle cx='208.8' cy='172.1' r='1.29' fill='%23ffffff' fill-opacity='0.43'/><circle cx='154.5' cy='40.1' r='0.62' fill='%23ffffff' fill-opacity='0.61'/><circle cx='277.2' cy='123.7' r='1.20' fill='%23ffffff' fill-opacity='0.48'/><circle cx='83.4' cy='120.7' r='0.98' fill='%23ffffff' fill-opacity='0.89'/><circle cx='161.5' cy='163.3' r='0.39' fill='%23c8dcff' fill-opacity='0.35'/><circle cx='147.3' cy='250.8' r='0.35' fill='%23ffffff' fill-opacity='0.29'/><circle cx='345.2' cy='31.6' r='0.48' fill='%23c8dcff' fill-opacity='0.90'/><circle cx='160.7' cy='145.6' r='0.71' fill='%23ffecd4' fill-opacity='0.75'/><circle cx='190.0' cy='20.9' r='0.35' fill='%23ffffff' fill-opacity='0.86'/><circle cx='284.9' cy='78.7' r='0.40' fill='%23ffecd4' fill-opacity='0.70'/><circle cx='8.0' cy='38.0' r='0.46' fill='%23ffffff' fill-opacity='0.27'/><circle cx='99.7' cy='39.4' r='0.35' fill='%23c8dcff' fill-opacity='0.69'/><circle cx='45.8' cy='149.9' r='0.66' fill='%23ffffff' fill-opacity='0.51'/><circle cx='287.5' cy='55.8' r='0.48' fill='%23ffffff' fill-opacity='0.38'/><circle cx='317.1' cy='149.8' r='0.35' fill='%23ffffff' fill-opacity='0.41'/><circle cx='226.7' cy='265.1' r='0.50' fill='%23ffffff' fill-opacity='0.95'/><circle cx='165.3' cy='221.7' r='1.24' fill='%23c8dcff' fill-opacity='0.31'/><circle cx='54.6' cy='127.0' r='0.64' fill='%23c8dcff' fill-opacity='0.89'/><circle cx='231.0' cy='182.7' r='0.50' fill='%23ffffff' fill-opacity='0.82'/><circle cx='194.8' cy='182.4' r='0.36' fill='%23ffffff' fill-opacity='0.76'/><circle cx='89.6' cy='252.0' r='1.48' fill='%23ffecd4' fill-opacity='0.93'/><circle cx='410.2' cy='261.0' r='0.37' fill='%23ffffff' fill-opacity='0.75'/><circle cx='146.4' cy='23.2' r='0.45' fill='%23ffffff' fill-opacity='0.64'/><circle cx='204.7' cy='8.0' r='0.99' fill='%23ffffff' fill-opacity='0.29'/><circle cx='72.6' cy='93.8' r='0.94' fill='%23ffffff' fill-opacity='0.35'/><circle cx='419.9' cy='252.2' r='0.52' fill='%23c8dcff' fill-opacity='0.72'/><circle cx='397.2' cy='137.9' r='1.38' fill='%23ffffff' fill-opacity='0.31'/><circle cx='184.6' cy='156.5' r='1.04' fill='%23ffffff' fill-opacity='0.64'/></svg>");background-size:420px 280px;
  border:3px solid #07090f;box-shadow:inset 0 0 0 2px #1a2033,inset 0 0 70px rgba(0,0,0,.95),0 0 0 2px #2b3348,0 0 0 4px #090b12}
.card-stage::before{content:"";position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='340'><circle cx='285.0' cy='117.6' r='1.07' fill='%23ffecd4' fill-opacity='0.45'/><circle cx='482.2' cy='133.6' r='0.35' fill='%23c8dcff' fill-opacity='0.27'/><circle cx='339.1' cy='273.0' r='0.35' fill='%23ffecd4' fill-opacity='0.60'/><circle cx='282.0' cy='284.3' r='0.36' fill='%23ffffff' fill-opacity='0.93'/><circle cx='225.6' cy='138.7' r='0.95' fill='%23ffffff' fill-opacity='0.64'/><circle cx='282.7' cy='143.6' r='0.38' fill='%23c8dcff' fill-opacity='0.78'/><circle cx='498.5' cy='160.6' r='0.35' fill='%23ffffff' fill-opacity='0.46'/><circle cx='305.3' cy='219.4' r='0.43' fill='%23ffffff' fill-opacity='0.68'/><circle cx='380.2' cy='302.5' r='1.11' fill='%23ffffff' fill-opacity='0.43'/><circle cx='417.0' cy='187.7' r='0.36' fill='%23c8dcff' fill-opacity='0.69'/><circle cx='242.6' cy='318.0' r='0.69' fill='%23ffffff' fill-opacity='0.47'/><circle cx='349.3' cy='5.2' r='0.87' fill='%23c8dcff' fill-opacity='0.53'/><circle cx='473.4' cy='46.2' r='0.35' fill='%23ffffff' fill-opacity='0.89'/><circle cx='376.7' cy='258.3' r='0.39' fill='%23ffecd4' fill-opacity='0.26'/><circle cx='458.8' cy='322.6' r='0.51' fill='%23ffffff' fill-opacity='0.26'/><circle cx='372.2' cy='125.7' r='0.35' fill='%23ffffff' fill-opacity='0.76'/><circle cx='259.9' cy='43.1' r='0.35' fill='%23ffffff' fill-opacity='0.37'/><circle cx='336.8' cy='128.6' r='0.36' fill='%23ffecd4' fill-opacity='0.39'/><circle cx='126.7' cy='113.4' r='1.17' fill='%23ffecd4' fill-opacity='0.78'/><circle cx='60.0' cy='239.7' r='0.37' fill='%23c8dcff' fill-opacity='0.41'/><circle cx='407.6' cy='18.9' r='0.39' fill='%23ffffff' fill-opacity='0.46'/><circle cx='149.8' cy='229.1' r='0.45' fill='%23c8dcff' fill-opacity='0.51'/><circle cx='409.2' cy='9.2' r='0.39' fill='%23ffffff' fill-opacity='0.35'/><circle cx='179.1' cy='160.1' r='0.67' fill='%23ffffff' fill-opacity='0.95'/><circle cx='103.2' cy='161.4' r='0.35' fill='%23ffecd4' fill-opacity='0.83'/><circle cx='121.7' cy='313.2' r='0.36' fill='%23ffffff' fill-opacity='0.70'/><circle cx='87.0' cy='10.7' r='0.66' fill='%23ffecd4' fill-opacity='0.29'/><circle cx='479.2' cy='247.0' r='0.75' fill='%23ffffff' fill-opacity='0.29'/><circle cx='120.8' cy='74.4' r='0.36' fill='%23ffffff' fill-opacity='0.85'/><circle cx='373.3' cy='36.4' r='0.37' fill='%23ffffff' fill-opacity='0.90'/><circle cx='77.7' cy='64.2' r='1.02' fill='%23ffffff' fill-opacity='0.55'/><circle cx='130.9' cy='114.3' r='0.42' fill='%23ffffff' fill-opacity='0.46'/><circle cx='382.0' cy='258.8' r='1.48' fill='%23ffffff' fill-opacity='0.30'/><circle cx='37.9' cy='274.9' r='0.35' fill='%23ffffff' fill-opacity='0.87'/><circle cx='66.7' cy='93.6' r='1.20' fill='%23ffffff' fill-opacity='0.78'/><circle cx='399.0' cy='108.4' r='0.35' fill='%23ffffff' fill-opacity='0.69'/><circle cx='419.7' cy='252.5' r='0.41' fill='%23ffffff' fill-opacity='0.71'/><circle cx='150.0' cy='288.1' r='0.63' fill='%23ffffff' fill-opacity='0.63'/></svg>");background-size:520px 340px;animation:twinkle 6s ease-in-out infinite;pointer-events:none}
.card-stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:8;
  background:linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.065) 40%,rgba(255,255,255,.015) 52%,transparent 58%),
  linear-gradient(115deg,transparent 0 63%,rgba(255,255,255,.04) 65%,transparent 70%),
  radial-gradient(120% 90% at 50% 125%,rgba(25,211,255,.09),transparent 60%);
  background-size:230% 100%,230% 100%,auto;background-position:calc(40% + var(--gx,0)*22%) 0,calc(60% + var(--gx,0)*30%) 0,0 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.card-stage:has(#viewer3d:not([hidden])){background-image:none}
.card-stage:has(#viewer3d:not([hidden]))::before{display:none}
.card-stage .card{position:relative;z-index:2;width:min(70%,540px);margin:auto;top:50%;transform:translateY(-50%);filter:drop-shadow(0 26px 30px rgba(0,0,0,.7))}
.card-stage{display:block}
.ship-window .viewer3d{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0;background:transparent}
.ship-window .viewer-loading{background:#03050a;color:var(--cy2);letter-spacing:.2em;text-transform:uppercase;font-size:11px;z-index:9}
.ship-window .viewer-bar{padding:12px 18px;color:#9aa3bb;z-index:9;letter-spacing:.08em;font-size:10.5px;text-transform:uppercase}
.ship-window .viewer-bar button{border-color:var(--edge3);background:linear-gradient(180deg,#171d2f,#0d101b);color:var(--ink);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;border-radius:5px}
.ship-window .viewer-bar button:hover{border-color:var(--cy);box-shadow:0 0 14px rgba(25,211,255,.3)}

.preview-switch,.side-switch{margin:18px auto 0}
.preview-switch{width:min(100%,380px)}
.side-switch{width:min(100%,260px);margin-top:10px}
.card-caption{margin:14px 0 18px;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px}
.caption-separator{color:var(--edge3)}

/* ---------- control strip ---------- */
.layout-tools{background:linear-gradient(180deg,#10141f,#0a0d16);border:1px solid var(--edge2);border-radius:10px;padding:10px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.5);gap:12px}
.tool-button{padding:9px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.tool-button span{font-size:15px;color:var(--cy)}
#download{border-color:var(--cy);color:#eafcff;background:linear-gradient(180deg,#14405c,#0b2236);box-shadow:0 3px 0 #04050a,0 0 18px rgba(25,211,255,.3)}
.tool-divider{background:var(--edge2)}
.layout-tools label{font-size:10.5px;letter-spacing:.14em;color:var(--dim);margin:0}
.layout-tools output{color:var(--cy2);font-size:11px;min-width:34px}

/* ---------- engraving profiles ---------- */
.variations{border-top:1px solid var(--edge);margin-top:6px}
.variations h3{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.variations-heading p{color:var(--cy2);font-size:11px;letter-spacing:.06em}
.choose-hint{color:var(--faint);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.variation{background:linear-gradient(180deg,#0e1220,#090b14);border:1px solid var(--edge2);border-radius:8px;box-shadow:0 4px 0 #04050a;transition:border-color .15s,box-shadow .15s,transform .08s}
.variation:hover{border-color:var(--cy)}
.variation:active{transform:translateY(2px);box-shadow:0 2px 0 #04050a}
.variation[aria-pressed=true]{border-color:var(--cy);box-shadow:0 4px 0 #04050a,0 0 22px rgba(25,211,255,.3)}
.thumbnail{background:linear-gradient(135deg,#bfc5cf 0%,#eef0f4 48%,#aeb5c1 100%);border-bottom:1px solid #000}
.variation-info{border-top:1px solid var(--edge);color:var(--ink);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.variation-info strong{color:var(--cy);font-weight:700}
.check{background:var(--cy);color:#04141c}

/* ---------- alert panel ---------- */
.background-notice{background:linear-gradient(180deg,#1a1409,#110d07);border:1px solid var(--am);border-left:5px solid var(--am);color:#ffd9a0;border-radius:8px;box-shadow:0 0 22px rgba(255,179,71,.14)}
.background-message>span{color:var(--am)}
.background-message p{font-size:12.5px;letter-spacing:.02em}
.background-notice button{background:#0e111b;border:1px solid var(--edge3);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 2px 0 #04050a}
.background-notice button:hover{border-color:var(--am);background:#171b29}
.background-notice .accept-background{color:var(--ok);border-color:rgba(77,255,176,.5);background:#0c1a15}
.background-help{color:#b39a62}
.background-notice.resolved{background:linear-gradient(180deg,#0b1a14,#08120e);border-color:var(--ok);border-left-color:var(--ok);color:#baffe0;box-shadow:0 0 22px rgba(77,255,176,.12)}
.background-notice.resolved .background-message>span{color:var(--ok)}
.background-result button{color:var(--ok)}

/* ---------- hangar manifest (templates) ---------- */
.tpl-dialog{background:linear-gradient(180deg,#0e111b,#090b13);color:var(--ink);border:1px solid var(--edge3);border-radius:14px;box-shadow:0 0 0 1px #000,0 40px 100px rgba(0,0,0,.85),0 0 80px rgba(25,211,255,.08)}
.tpl-dialog::backdrop{background:rgba(2,3,8,.8);backdrop-filter:blur(3px)}
.tpl-head h2{font-family:var(--disp);font-weight:500;font-size:18px;letter-spacing:.16em;text-transform:uppercase}
.tpl-card{background:linear-gradient(180deg,#0f1322,#0a0c15);border:1px solid var(--edge2);border-radius:10px;box-shadow:0 5px 0 #04050a;color:var(--ink)}
.tpl-card:hover,.tpl-card:focus-visible{border-color:var(--cy);box-shadow:0 5px 0 #04050a,0 0 26px rgba(25,211,255,.28);transform:translateY(-2px)}
.tpl-card canvas{background:#05070d}
.tpl-name{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.tpl-vibe{color:var(--dim);font-size:11px;line-height:1.5}

/* ---------- press flash ---------- */
.blip{animation:blipFlash .45s ease-out}

/* ---------- smaller screens ---------- */
@media(max-width:1050px){.workspace{grid-template-columns:300px minmax(0,1fr)}.studio{padding:24px 22px 36px}.ship-status{display:none}}
@media(max-width:760px){
  .header{height:auto;min-height:60px;padding:10px 16px;flex-wrap:wrap;gap:8px}.ship-right{margin-left:auto}.ship-clock{display:none}
  .workspace{display:flex}.studio{padding:20px 14px 28px}.controls{border-top:1px solid var(--edge);padding:24px 18px}
  .ship-window{padding:22px 12px 14px;border-radius:26px}.ship-window::before{inset:6px;border-radius:21px}.card-stage{border-radius:14px}
  .ship-window::after{font-size:7px;letter-spacing:.2em}.card-stage .card{width:84%}
  .win-led.l{left:30px}.win-led.r{right:30px}
  .ship-window .viewer-bar span{display:none}.ship-window .viewer-bar{justify-content:flex-end}
  .layout-tools{flex-wrap:wrap;justify-content:center;width:100%;max-width:100%}.tool-divider{display:none}.layout-tools input{width:110px}
}
@media(prefers-reduced-motion:reduce){.booting .header,.booting .controls,.booting .studio .ship-window{animation:none}.header::after,.card-stage::before,.led.blink,.win-led{animation:none}}