/* structural styles for DataGame shared components; each site sets the variables */
.dg-r{--r-bg:#070A0E;--r-panel:#111821;--r-line:#1F2A36;--r-text:#E6EDF3;--r-muted:#93A3B5;--r-dim:#5E6E80;--r-hum:#4FD1E8;--r-bot:#8D99A6;--r-acc:#F2A65A;--r-track:#0D131A;--r-bars:#2A3847;--r-mono:"JetBrains Mono",ui-monospace,monospace;--r-h:min(64vh,640px);background:var(--r-bg);color:var(--r-text)}
.dg-stage{position:relative;height:var(--r-h);min-height:380px;overflow:hidden;touch-action:pan-y;cursor:grab;background:var(--r-bg)}
.dg-stage:active{cursor:grabbing}
.dg-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dg-gy{pointer-events:none;opacity:0;transition:opacity .4s}
.dg-stage.glyph .dg-gy{opacity:1}.dg-stage.glyph .dg-gl{opacity:0}
.dg-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes dggrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-2%,3%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.dg-grain{animation:none}}
.dg-panel{position:absolute;top:14px;right:14px;width:300px;background:var(--r-panel);border:1px solid var(--r-line);font:12px/1.45 var(--r-mono);z-index:3;cursor:default;color:var(--r-text)}
.dg-row{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid var(--r-line)}
.dg-k{color:var(--r-dim);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.dg-s3{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--r-line)}
.dg-s3>div{padding:8px 12px;border-right:1px solid var(--r-line)}.dg-s3>div:last-child{border-right:0}
.dg-s3 b{display:block;font:700 16px var(--r-mono)}
.dg-hum{color:var(--r-hum)}.dg-acc{color:var(--r-acc)}
.dg-feed{padding:8px 12px;border-bottom:1px solid var(--r-line);min-height:100px}
.dg-feed div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--r-muted)}
.dg-rec{margin:0;padding:10px 12px;color:var(--r-muted);font:11px/1.5 var(--r-mono);white-space:pre;overflow:hidden;max-height:190px}
.dg-key{color:var(--r-dim)}.dg-str{color:var(--r-hum)}.dg-num{color:var(--r-acc)}
.dg-legend{position:absolute;left:14px;bottom:14px;display:flex;gap:6px;z-index:3}
.dg-legend span{background:var(--r-panel);border:1px solid var(--r-line);font:500 11px var(--r-mono);color:var(--r-muted);padding:5px 8px;display:inline-flex;align-items:center;gap:6px}
.dg-legend i{width:9px;height:9px;display:inline-block}.dg-bh{background:var(--r-hum)}.dg-bb{background:var(--r-bot)}.dg-ba{background:var(--r-acc)}
.dg-ctrl{display:grid;grid-template-columns:auto auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-top:1px solid var(--r-line);background:var(--r-bg)}
.dg-ctrl.min{grid-template-columns:auto auto 1fr}
.dg-btn{height:32px;min-width:32px;padding:0 10px;border:1px solid var(--r-line);background:var(--r-panel);color:var(--r-text);font:600 12px var(--r-mono);cursor:pointer;border-radius:var(--r-rad,0)}
.dg-btn.on{border-color:var(--r-hum);color:var(--r-hum)}
.dg-clock{font:600 12.5px var(--r-mono);min-width:104px}
.dg-scrub{position:relative;height:38px}
.dg-scrub canvas{position:absolute;inset:0;width:100%;height:100%}
.dg-scrub input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.dg-head{position:absolute;top:0;bottom:0;width:2px;background:var(--r-text);pointer-events:none}
.dg-groups{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dg-g{display:flex}.dg-g .dg-btn+.dg-btn{border-left:0}
@media (max-width:900px){
  .dg-stage{height:56vh;min-height:340px}
  .dg-panel{position:static;width:auto;border-width:1px 0 0}
  .dg-ctrl{grid-template-columns:auto 1fr}.dg-ctrl .dg-clock{text-align:right}
  .dg-ctrl .dg-scrub{grid-column:1/-1}.dg-ctrl .dg-groups{grid-column:1/-1;justify-content:flex-start}
  .dg-ctrl.min{grid-template-columns:auto 1fr}
  .dg-legend{display:none}
  .dg-rec{max-height:none}
}
/* media tiles */
[data-tile]{position:relative;overflow:hidden}
[data-tile] video,[data-tile] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
[data-tile] canvas.gly{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .3s}
[data-mode="glyph"] [data-tile]:not(.reveal) video,[data-mode="glyph"] [data-tile]:not(.reveal) img{opacity:0}
[data-mode="glyph"] [data-tile].reveal canvas.gly,[data-mode="clean"] [data-tile] canvas.gly{opacity:0}
/* faq */
.dg-faqf{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.dg-faqf button{font:inherit;cursor:pointer}
.dg-q summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:110px 1fr 24px;gap:16px;align-items:baseline}
.dg-q summary::-webkit-details-marker{display:none}
.dg-qi{text-align:right;transition:transform .2s}
.dg-q[open] .dg-qi{transform:rotate(45deg)}
@media (max-width:640px){.dg-q summary{grid-template-columns:1fr 24px}.dg-qc{grid-column:1/-1}}
/* blog */
.dg-post{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.dg-pm{position:relative;aspect-ratio:16/10;overflow:hidden}
.dg-pm video,.dg-pm img{width:100%;height:100%;object-fit:cover;display:block}
/* form */
.dg-form{display:grid;gap:16px}
.dg-form label{display:grid;gap:6px}
.dg-form input,.dg-form select,.dg-form textarea{font:inherit;width:100%}
.dg-f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dg-form fieldset{border:0;padding:0;margin:0}
.dg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dg-chip{display:inline-flex!important;cursor:pointer}
.dg-chip input{position:absolute;opacity:0;width:1px;height:1px}
.dg-fend{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dg-submit{cursor:pointer}
@media (max-width:640px){.dg-f2{grid-template-columns:1fr}}
[hidden]{display:none!important}