/* Siddo drafts kit: the siddo.in look (tokens, type, windows, chips) + one screen per section. Shared by teams and solo. */
:root{
  --bg:#0e0d0b; --panel:#141310; --fg:#e9e4d8; --dim:#8d877b; --line:#2a2722; --hi:#f0b44c; --ok:#7fb59a; --rec:#e5544b;
  --gut:clamp(16px,5vw,80px); --ease:cubic-bezier(.22,.8,.22,1);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:400 16px/1.5 Satoshi,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--hi);color:var(--bg)}
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg video{width:100%;height:100%;object-fit:cover;opacity:.26;filter:saturate(.8);transition:opacity .8s var(--ease)}
#bg video.swap{opacity:0}
#bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,transparent 0,rgba(14,13,11,.55) 55%,var(--bg) 100%)}
.wrap{position:relative;z-index:1;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));max-width:1500px;margin:0 auto}
header.top{position:absolute;left:var(--gut);right:var(--gut);top:calc(22px + env(safe-area-inset-top,0px));z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px}
.mark{display:block;height:26px;flex:none}.mark svg{height:100%;width:auto;display:block}
.wip{flex:1 1 0;min-width:0;text-align:center;font-size:12.5px;color:var(--dim);margin:0}
.draft{flex:none;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px}
.draft i{width:6px;height:6px;border-radius:50%;background:var(--hi);box-shadow:0 0 10px var(--hi);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35;box-shadow:0 0 2px var(--hi)}}

/* one screen per section */
.pg{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.6vh,28px);padding-block:clamp(72px,11vh,110px) clamp(36px,6vh,64px);position:relative}
.pg.tall{justify-content:flex-start}
.k{margin:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hi)}
h1,h2{font-weight:500;letter-spacing:-.04em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5.2vw,84px);line-height:1.02;max-width:20ch}
h2{font-size:clamp(28px,3.2vw,48px);line-height:1.05;max-width:24ch}
h1 em,h2 em{font-style:normal;color:var(--hi)}
.sub{margin:0;color:var(--fg);font-weight:500;font-size:clamp(20px,2.2vw,32px);letter-spacing:-.03em;line-height:1.15;max-width:34ch}
.body{margin:0;color:var(--dim);font-size:clamp(16px,1.3vw,19px);line-height:1.6;max-width:62ch}
.ph{opacity:.7}

/* the rotating line */
.rot{display:inline-grid;vertical-align:bottom;color:var(--hi)}
.rot>span{grid-area:1/1;opacity:0;transform:translateY(.45em);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.rot>span.cur{opacity:1;transform:none}
.rot>span.out{opacity:0;transform:translateY(-.45em)}

/* windows: siddo.in's frame, chip on top, words inside (no cards) */
.screen{position:relative;overflow:hidden;background:#0a0908;border:1px solid var(--line);border-radius:3px;transform:translateZ(0);transition:border-color .5s var(--ease),transform .9s var(--ease)}
.screen::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(14,13,11,.8),rgba(14,13,11,.15) 22%,transparent 34%,transparent 62%,rgba(14,13,11,.7));pointer-events:none}
.screen>img,.screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.chip{position:absolute;z-index:3;top:12px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;pointer-events:none}
.chip .n{color:var(--hi);white-space:nowrap}
.chip .st{color:var(--fg);opacity:.85;display:flex;gap:8px;align-items:center;text-align:right}
.chip .st i{width:6px;height:6px;border-radius:50%;background:var(--hi);box-shadow:0 0 8px var(--hi)}
.cap{position:absolute;z-index:3;left:14px;right:14px;bottom:12px;display:flex;flex-direction:column;gap:4px}
.cap b{font-weight:500;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em;line-height:1.15}
.cap span{color:var(--dim);font-size:clamp(13px,1vw,15px);max-width:44ch}
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);grid-auto-rows:clamp(140px,23vh,230px)}
.mosaic>.screen:hover{border-color:var(--hi);transform:translateY(-3px)}
/* inside a window: a small live view of the thing */
.in-ui{position:absolute;z-index:2;left:14px;right:14px;top:40px;bottom:64px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim);overflow:hidden}
.in-ui .row{display:flex;align-items:center;gap:8px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:rgba(14,13,11,.6);white-space:nowrap;overflow:hidden}
.in-ui .row b{color:var(--fg);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.dot{flex:none;width:7px;height:7px;border-radius:50%}
.d-h{background:var(--hi)}.d-m{background:var(--fg)}.d-l{background:#5a5448}.d-ok{background:var(--ok)}
.tag{flex:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:1px 7px;border-radius:999px;border:1px solid var(--line)}
.tag.hi{color:var(--hi);border-color:rgba(240,180,76,.45)}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:1}
.cols>div{border:1px solid var(--line);border-radius:6px;padding:6px;display:flex;flex-direction:column;gap:5px;min-width:0}
.cols h6{margin:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:500}
.cols p{margin:0;padding:3px 6px;border-radius:4px;background:rgba(233,228,216,.05);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cols .x p{text-decoration:line-through;color:var(--dim)}
.bars{display:flex;align-items:flex-end;gap:5px;flex:1;padding-top:6px}
.bars i{flex:1;background:linear-gradient(var(--hi),rgba(240,180,76,.25));border-radius:2px 2px 0 0}

/* pills, forms */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--hi);color:var(--bg);font-weight:500;font-size:15px;border:0;cursor:pointer}
.ri{display:flex;gap:8px;flex-wrap:wrap;max-width:520px}
.ri input{flex:1 1 220px;min-width:0;height:46px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font:inherit}
.ri input:focus{outline:none;border-color:var(--dim)}
.ri-m{margin:0;font-size:13px;color:var(--dim);min-height:1.4em}
footer.end{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--dim)}

@media (max-width:900px){
  .pg{min-height:auto;padding-block:56px}.pg:first-of-type{min-height:100svh}
  .mosaic{grid-auto-rows:clamp(200px,52vw,260px)}.mosaic>*{grid-column:1 / -1 !important}
  footer.end{position:static;margin-top:20px}
  .wip{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}