/* Layout: a dark showroom. The headline, then the AmigaChrome Workbench as the
   centrepiece (a working desktop at 1280x800, scaled to fit), the pack's
   numbers, real screenshots, the catalogue by purpose, and the three steps. */
:root{
  color-scheme:dark;
  --bg:#0B0E11; --panel:#141A20; --line:#252C34;
  --ink:#E8EBEE; --steel:#9AA6B2; --dim:#6E7A86;
  --red:#E2414A; --ok:#5EC48A; --warn:#E2A54A;
  /* the Workbench, Open dark look */
  --wb-bar:#12171C; --wb-frame:#1C232B; --wb-frame-hi:#2A333D; --wb-title:#222A33;
  --wb-title-on:#2C3743; --wb-ink:#E3E7EB; --wb-dim:#8C98A4; --wb-paper:#F4F6F8;
  --wb-sel:#3A6EA5; --wb-red:#D8323C;
  --display:"Sora","Helvetica Neue",Arial,sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.eyebrow{font:600 .74rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}

.top{display:flex;align-items:center;gap:16px;padding-block:20px}
.word{font:700 1.3rem/1 var(--display);text-decoration:none;letter-spacing:-.01em}
.word b{color:var(--red);font-weight:700}.word span{color:var(--steel)}
.top .logo{margin-left:auto;width:44px;height:44px}

.hero{padding-block:clamp(28px,5vw,64px) clamp(28px,4vw,44px);display:grid;gap:20px;max-width:960px}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;font-weight:800;letter-spacing:-.035em}
.hero h1 span{color:var(--steel)}
.lede{font-size:1.2rem;color:var(--steel);max-width:60ch}
.free{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.free span{font:600 .82rem/1 var(--display);padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.free span b{color:var(--red);font-weight:700}

/* ---------- the Workbench ---------- */
.stage{position:relative;width:100%;aspect-ratio:16/10;max-width:100%;border-radius:14px;overflow:hidden;box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.wb{position:absolute;left:0;top:0;width:1280px;height:800px;transform-origin:0 0;transform:scale(var(--k,.9));font-family:var(--mono);color:var(--wb-ink);user-select:none;-webkit-user-select:none;overflow:hidden;
  background:
    radial-gradient(1200px 520px at 78% 112%,rgba(216,50,60,.35),transparent 60%),
    radial-gradient(900px 600px at 12% -10%,rgba(90,140,200,.45),transparent 62%),
    linear-gradient(165deg,#1B2B42 0%,#132033 42%,#0E1724 100%)}
.wb .ribbon{position:absolute;inset:0;pointer-events:none}
.sbar{position:absolute;inset:0 0 auto 0;height:26px;background:var(--wb-bar);border-bottom:1px solid #000;display:flex;align-items:center;gap:16px;padding-inline:8px 0;font-size:12.5px;z-index:900}
.sbar .ball{width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--wb-red) 0 25%,#fff 0 50%,var(--wb-red) 0 75%,#fff 0);box-shadow:inset -2px -2px 3px rgba(0,0,0,.35)}
.sbar .name{font-weight:600}
.sbar .mem{color:var(--wb-dim)}
.sbar .grow{flex:1}
.sbar .ico{height:26px;display:flex;align-items:center;gap:6px;padding-inline:4px;border-radius:4px;cursor:default}
.sbar .ico svg{width:16px;height:16px}
.sbar button.ico{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.sbar button.ico:hover,.sbar button.ico[aria-expanded="true"]{background:var(--wb-title-on)}
.sbar .depth{width:30px;height:26px;border-left:1px solid #000;display:grid;place-items:center}
.cogmenu,.ctx{position:absolute;z-index:950;min-width:200px;background:rgba(28,35,43,.96);border:1px solid #39434E;border-radius:8px;padding:6px;box-shadow:0 18px 40px -12px rgba(0,0,0,.8);font-size:13px}
.cogmenu{top:30px;right:34px}
.cogmenu div,.ctx div{padding:7px 12px;border-radius:5px}
.cogmenu div:hover,.ctx div:hover{background:var(--wb-sel)}
.cogmenu hr,.ctx hr{border:0;border-top:1px solid #39434E;margin:5px 6px}
.cogmenu .h,.ctx .h{color:var(--wb-dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px 4px}
.cogmenu .h:hover,.ctx .h:hover{background:none}

.dicons{position:absolute;left:22px;top:52px;display:grid;gap:22px;z-index:1}
.dicon{width:84px;display:grid;justify-items:center;gap:6px;font-size:12px;text-shadow:0 1px 2px #000;cursor:default}
.dicon svg{width:52px;height:52px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.45))}
.dicon span{padding:1px 5px;border-radius:3px}
.dicon.sel span{background:var(--wb-sel)}

.win{position:absolute;background:var(--wb-frame);border:1px solid #000;border-radius:7px;box-shadow:0 30px 60px -24px rgba(0,0,0,.85),inset 0 0 0 1px var(--wb-frame-hi);display:flex;flex-direction:column;overflow:hidden}
.win[hidden]{display:none!important}
.tbar{height:26px;flex:none;background:var(--wb-title);display:flex;align-items:center;gap:8px;padding-inline:6px;font-size:12.5px;cursor:grab;border-bottom:1px solid #000}
.win.active .tbar{background:linear-gradient(180deg,#34404D,var(--wb-title-on))}
.win.active .tbar .tt{color:#fff}
.tbar .tt{flex:1;color:var(--wb-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gad{width:16px;height:16px;border:1px solid #4A5562;border-radius:3px;display:grid;place-items:center;background:#1A2027;flex:none}
.gad.close{cursor:pointer}
.gad.close::after{content:"";width:6px;height:6px;border-radius:2px;background:#8C98A4}
.gad.close:hover::after{background:var(--wb-red)}
.gad.z::after{content:"";width:8px;height:6px;border:1px solid #8C98A4;border-radius:1px}
.gad.d::after{content:"";width:6px;height:5px;border:1px solid #8C98A4;box-shadow:3px 3px 0 -1px #1A2027,3px 3px 0 0 #8C98A4}
.tools{display:flex;gap:4px;padding:8px 10px;background:#1F262E;border-bottom:1px solid #000;font-size:11px}
.tool{display:grid;justify-items:center;gap:3px;padding:4px 7px;border-radius:5px;color:var(--wb-dim)}
.tool:hover{background:#2A333D;color:var(--wb-ink)}
.tool i{width:22px;height:18px;border-radius:4px;display:block}
.tsep{width:1px;background:#39434E;margin-inline:4px}

/* OpenWrite */
.ow .doc{flex:1;background:#2A3139;padding:18px 0;overflow:hidden;display:flex;justify-content:center}
.ow .paper{width:420px;background:var(--wb-paper);color:#16191D;padding:34px 40px;box-shadow:0 6px 20px rgba(0,0,0,.4);font-family:var(--body);font-size:12.5px;line-height:1.55}
.ow .paper h4{font:700 19px/1.2 var(--display);margin:0 0 4px;color:#16191D}
.ow .paper .sub{font:600 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:#C8202B;margin-bottom:14px}
.ow .paper p{margin:0 0 9px}
.ow .paper .find{background:#BFD6F0;border-radius:2px}
.ow .status{font-size:11px;color:var(--wb-dim);padding:5px 10px;background:#1F262E;border-top:1px solid #000;display:flex;justify-content:space-between}

/* OpenFiles */
.of .panes{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px;background:#1A2027;min-height:0}
.pane{background:#12171C;border:1px solid #39434E;border-radius:5px;display:flex;flex-direction:column;min-height:0;font-size:12px}
.pane .tabs{display:flex;gap:2px;padding:5px 5px 0}
.pane .tab{padding:4px 10px;border-radius:5px 5px 0 0;background:#1F262E;color:var(--wb-dim)}
.pane .tab.on{background:#2A333D;color:var(--wb-ink)}
.pane .path{margin:6px;padding:4px 8px;border:1px solid #39434E;border-radius:4px;color:var(--wb-dim)}
.pane .row{display:grid;grid-template-columns:18px 1fr auto;gap:8px;align-items:center;padding:3px 10px}
.pane .row:nth-child(odd){background:rgba(255,255,255,.02)}
.pane .row.sel{background:var(--wb-sel)}
.pane .row i{width:14px;height:11px;border-radius:2px;background:#E0A93B;display:block}
.pane .row i.f{background:#B9C3CD;height:14px;width:11px;margin-left:2px}
.pane .row small{color:var(--wb-dim);font-size:11px}
.pane .foot{margin-top:auto;padding:5px 10px;color:var(--wb-dim);font-size:11px;border-top:1px solid #39434E}

/* OpenPlay */
.op .art{height:150px;background:radial-gradient(circle at 50% 120%,rgba(216,50,60,.6),transparent 60%),linear-gradient(160deg,#243246,#151C25);display:grid;place-items:center}
.op .bars{display:flex;gap:4px;align-items:flex-end;height:70px}
.op .bars i{width:10px;border-radius:2px 2px 0 0;background:linear-gradient(0deg,#D8323C,#F4A3A8);height:30%}
.op .meta{padding:10px 14px 4px;font-size:12px}
.op .meta b{display:block;font-size:13px;color:#fff;margin-bottom:2px}
.op .meta span{color:var(--wb-dim)}
.op .prog{margin:8px 14px;height:4px;background:#2A333D;border-radius:2px;overflow:hidden}
.op .prog i{display:block;height:100%;width:38%;background:var(--wb-red)}
.op .ctl{display:flex;justify-content:center;gap:14px;padding:6px 0 12px}
.op .ctl i{width:26px;height:26px;border-radius:50%;border:1px solid #4A5562;display:block}
.op .ctl i.p{width:34px;height:34px;background:var(--wb-ink);border:0;position:relative}
.op .ctl i.p::after{content:"";position:absolute;left:12px;top:9px;width:0;height:0;border-left:12px solid #12171C;border-top:8px solid transparent;border-bottom:8px solid transparent}

/* the dock */
.dock{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:10px;padding:8px 14px 10px;border-radius:20px;background:rgba(18,23,29,.52);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 16px 40px -14px rgba(0,0,0,.8);z-index:800}
.dk{position:relative;width:56px;height:56px;border:0;padding:0;background:none;cursor:pointer;transition:transform .16s ease-out}
.dk svg{width:56px;height:56px;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
.dk.on::after{content:"";position:absolute;left:50%;bottom:-7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--wb-ink)}
.dk .tip{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);background:rgba(28,35,43,.96);border:1px solid #39434E;padding:4px 9px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.dk:hover .tip,.dk:focus-visible .tip{opacity:1}
.dk:hover{transform:translateY(-10px) scale(1.18)}
.dk.hop{animation:hop .5s ease-out 2}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-16px)}}
.dsep{width:1px;height:46px;align-self:center;background:rgba(255,255,255,.2)}
@media (prefers-reduced-motion:reduce){.dk,.dk:hover{transition:none;transform:none}.dk.hop{animation:none}.op .bars i{animation:none!important}}

.hint{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;font:400 .78rem/1.4 var(--mono);color:var(--dim)}
.hint b{color:var(--steel);font-weight:600}

/* ---------- facts, shots, catalogue ---------- */
.facts{display:flex;flex-wrap:wrap;gap:14px 40px;padding-block:36px;border-bottom:1px solid var(--line)}
.fact{display:grid;gap:4px}
.fact b{font:700 1.7rem/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fact small{font:400 .78rem/1.3 var(--mono);color:var(--dim)}

.real{padding-block:clamp(40px,6vw,72px)}
.real h2{font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.02em;margin:10px 0 22px}
.shots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.shot{margin:0;display:grid;gap:8px;min-width:0}
.shot img{display:block;width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
.shot figcaption{font:400 .76rem/1.35 var(--mono);color:var(--dim)}
.shot figcaption b{color:var(--steel);font-weight:600}

.cat{padding-block:clamp(40px,6vw,64px);border-top:1px solid var(--line)}
.cathead{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,4vw,48px);align-items:start}
.cathead h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.cathead .eyebrow{display:block;margin-bottom:10px}
.cathead p.intro{color:var(--steel);margin-top:10px;font-size:1rem}
.apps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.app{display:grid;grid-template-columns:minmax(0,11rem) 3.6rem minmax(0,1fr) auto;gap:6px 18px;align-items:baseline;padding-block:14px;border-bottom:1px solid var(--line)}
.app h3{font-size:1.02rem;font-weight:600}
.app .v{font:400 .78rem/1 var(--mono);color:var(--dim);font-variant-numeric:tabular-nums}
.app p{color:var(--steel);font-size:.98rem}
.st{font:600 .66rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap;justify-self:end;color:var(--dim)}
.st.std{color:var(--ok)}.st.pre{color:var(--warn)}.st.alw{color:var(--red)}

.lic{padding-block:clamp(44px,6vw,72px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px)}
.lic h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;line-height:1.1}
.lic p{color:var(--steel)}
.lic dl{margin:0;display:grid;gap:16px}
.lic dt{font:600 .95rem/1.2 var(--display);color:var(--ink)}
.lic dd{margin:4px 0 0;color:var(--steel);font-size:.98rem}

.install{padding-block:clamp(44px,6vw,80px);border-top:1px solid var(--line)}
.install h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.02em;margin:10px 0 26px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.steps li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px;display:grid;gap:8px;counter-increment:s;align-content:start}
.steps li::before{content:counter(s);font:800 1.8rem/1 var(--display);color:var(--red)}
.steps h3{font-size:1.05rem;font-weight:600}
.steps p{color:var(--steel);font-size:.96rem}
.steps code{font:400 .86em var(--mono);color:var(--ink)}
.promise{margin-top:22px;color:var(--steel);max-width:72ch}

footer{border-top:1px solid var(--line);padding-block:30px 44px;font:400 .84rem/1.6 var(--display);color:var(--dim)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

@media (max-width:900px){
  .shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cathead,.lic{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .app{grid-template-columns:minmax(0,1fr) auto}
  .app .v{grid-column:2;grid-row:1;justify-self:end}
  .app p{grid-column:1 / -1}
  .app .st{grid-column:1 / -1;justify-self:start}
  .hint{display:none}
}