@import url(fonts.css);
:root{--paper:#0d1013;--line:#1f2429;--text:#e8ebe6;--dim:#8a948c;--lime:#c6f432}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font-family:Sora,system-ui,sans-serif;padding:36px}
h1{font-size:26px;margin:0 0 6px}
h1 small,.no{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lede{color:var(--dim);font-size:14px;max-width:80ch;line-height:1.55;margin:0 0 28px}
.cards{display:flex;flex-direction:column;gap:18px}
.card{border:1px solid var(--line);border-radius:4px;padding:20px 22px;background:#0a0d10}
.card header{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.card h2{margin:0;font-size:20px}.card .vibe{color:var(--dim);font-size:13px}
.card-grid{display:flex;gap:16px;align-items:stretch;flex-wrap:wrap}
.logo-tile{width:200px;height:210px;display:flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--line)}
.preview{border:1px solid var(--line);border-radius:4px;overflow:hidden;flex:none}
.card-side{flex:1;min-width:320px;display:flex;flex-direction:column;gap:10px}
.swatches{display:flex;gap:6px}
.sw{flex:1;height:58px;border-radius:3px;position:relative;border:1px solid rgba(255,255,255,.08)}
.sw span,.sw code{position:absolute;left:6px;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;mix-blend-mode:difference;color:#fff}
.sw span{top:6px}.sw code{bottom:6px;text-transform:none}
.type{display:flex;gap:16px;align-items:center;padding:12px 14px;border-radius:4px;flex:1}
.t-display{font-size:54px;line-height:1;min-width:70px;text-align:center}
.t-name{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.t-body{margin:0;font-size:14px;line-height:1.45}.t-mono{margin:6px 0 0;font-size:11px}
.concept{color:var(--dim);font-size:13px;line-height:1.5;max-width:90ch;margin:14px 0 8px}
.more{color:var(--lime);font-family:"JetBrains Mono",monospace;font-size:12px;text-decoration:none}
/* deliverables */
.export{position:relative;overflow:hidden;flex:none}
.export .scene{position:absolute;inset:0;display:block}
.export .layer{position:absolute;inset:0}
.export .layer.pad{display:flex;align-items:center}
.export .layer.center{display:flex;align-items:center;justify-content:center}
.lk{display:flex;align-items:center;gap:4%;width:100%}
.lk.center{justify-content:center}
.lk.stacked{flex-direction:column;justify-content:center;text-align:center;gap:0}
.lk.stacked .lk-text{align-items:center;margin-top:3%}
.lk-logo{flex:none}.lk-logo svg{width:100%;height:100%;display:block}
.lk-text{display:flex;flex-direction:column;gap:.35em}
.lk-text .wm{display:block;white-space:nowrap}
.lk-tag{margin:0;font-weight:500;opacity:.92;white-space:nowrap}
.lk-rule{display:block;width:62%;margin:.1em 0 .05em}
.lk-rail{display:block;margin-bottom:6px}.lk-rail svg{display:block;overflow:visible}.lk.stacked .lk-rail{margin-left:auto;margin-right:auto}.lk.stacked .lk-rule{margin-left:auto;margin-right:auto}
.lk-logo svg{overflow:visible}
.lk-stats{margin:0;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* direction page */
.dhead{display:flex;gap:28px;align-items:center;padding:28px 32px;border-radius:4px;margin-bottom:16px}
.dhead h1{font-size:34px;margin:4px 0 8px}.dhead p{margin:0 0 16px;max-width:80ch;opacity:.8;line-height:1.5}
.meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px}.meta .swatches{flex:1;min-width:420px}.meta .type{flex:1;min-width:420px}
.group{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:30px 0 12px;padding-top:14px;border-top:1px solid var(--line)}
.items{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.item{margin:0}
.item figcaption{display:flex;gap:10px;align-items:baseline;font-size:12px;margin-bottom:6px}
.item figcaption code{color:var(--dim);font-size:11px}.item figcaption a{color:var(--lime);font-family:"JetBrains Mono",monospace;font-size:11px;text-decoration:none;margin-left:auto}
.frame{overflow:hidden;border:1px solid var(--line);border-radius:3px}
.frame.checker{background-image:linear-gradient(45deg,#222 25%,transparent 25%),linear-gradient(-45deg,#222 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#222 75%),linear-gradient(-45deg,transparent 75%,#222 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:#333}
body.export-mode{padding:0;background:transparent}
body.export-mode .export{margin:0 0 2px}