@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Instrument+Serif&family=Nanum+Myeongjo:wght@400;700&display=swap');

:root{
  --paper:#F0EAD6;
  --paper-2:#E8E0C7;
  --ink:#06283F;
  --indigo:#4B5563;
  --bright:#7E8894;
  --muted:#4E5E6A;
  --accent:#FFB87E;
  --lavender:#C3B4DE;
  --rule:#D2C6A8;
  --case:var(--indigo);
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --h1:"Nanum Myeongjo",Georgia,"Times New Roman",serif;
  --pad:22px;
}
@media (min-width:760px){ :root{ --pad:48px } }
@media (min-width:1120px){ :root{ --pad:72px } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:19px;line-height:1.68;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
.shell{max-width:1120px;margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:10px 0;font-size:14px}

/* ============ drift ============ */
.drift{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(120deg, var(--accent), var(--lavender), var(--bright));
  background-size:300% 300%;
  opacity:.32;
  filter:blur(60px);
  animation:driftMove 26s ease-in-out infinite;
}
@keyframes driftMove{
  0%{background-position:0% 45%}
  50%{background-position:100% 55%}
  100%{background-position:0% 45%}
}

/* ============ ripple ground ============ */
.ripple{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(2.5px)}
.ripple i{
  position:absolute;left:50%;top:34%;border-radius:50%;
  transform:translate(-50%,-50%);display:block;
  border:1.5px solid rgba(71,68,63,.08);
}
.ripple i:nth-child(1){width:min(150vw,1180px);aspect-ratio:1;border-color:rgba(71,68,63,.10)}
.ripple i:nth-child(2){width:min(112vw,880px);aspect-ratio:1;border-color:rgba(255,184,126,.22)}
.ripple i:nth-child(3){width:min(76vw,600px);aspect-ratio:1;border-color:rgba(71,68,63,.16)}
.ripple i:nth-child(4){width:min(44vw,350px);aspect-ratio:1;border-color:rgba(255,184,126,.34)}
.bloom{
  position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);
  width:min(190vw,1600px);aspect-ratio:1;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,
      rgba(255,184,126,.5) 0%,
      rgba(255,184,126,.26) 16%,
      rgba(125,120,112,.20) 34%,
      rgba(71,68,63,.14) 52%,
      rgba(71,68,63,.05) 70%,
      rgba(71,68,63,0) 84%);
  filter:blur(38px);
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ header ============ */
.bar{position:sticky;top:0;z-index:40;backdrop-filter:blur(9px);background:rgba(240,234,214,.82);border-bottom:1px solid transparent;transition:border-color .3s}
.bar.stuck{border-bottom-color:var(--rule)}
.bar-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:52px;max-width:1120px;margin:0 auto;
  padding:0 var(--pad);
}
.wordmark{display:flex;align-items:center;font-family:var(--h1);font-size:20px;text-decoration:none;white-space:nowrap;letter-spacing:.005em}
.bar nav{display:flex;gap:20px;font-size:14.5px;font-weight:500}
.bar nav a{text-decoration:none;color:var(--muted);position:relative;padding:3px 0}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--indigo);transform:scaleX(0);transform-origin:right;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.bar nav a:hover{color:var(--ink)}
.bar nav a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:559px){ .bar nav a.opt{display:none} }

/* ============ hero ============ */
.hero{padding:clamp(24px,5.5vh,52px) 0 clamp(14px,2.6vh,24px);text-align:center}
.hero h1{
  font-family:var(--h1);font-weight:400;
  font-size:clamp(2.1rem,6.6vw,4.1rem);line-height:1.14;letter-spacing:-.012em;
  margin:0 auto 12px;max-width:16ch;color:var(--indigo);
  word-break:keep-all;
}
.hero p{margin:0 auto;max-width:42ch;color:var(--ink);font-size:1.12rem;line-height:1.5;opacity:.9}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ filter ============ */
.ask{
  position:sticky;top:52px;z-index:30;padding:16px 0 15px;margin-bottom:6px;
}
.ask::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  z-index:-1;background:rgba(240,234,214,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.ask-in{display:flex;align-items:center;gap:18px}
.ask h2{font-size:14px;font-weight:600;margin:0;white-space:nowrap;color:var(--muted)}
@media (max-width:859px){ .ask h2{display:none} }
.chips{
  display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  margin:0 calc(50% - 50vw);padding:3px calc(50vw - 50% + var(--pad)) 3px var(--pad);
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.chips::-webkit-scrollbar{display:none}
@media (min-width:1060px){ .chips{margin:0;padding:0;flex-wrap:wrap;mask-image:none} }
.chip{flex:none;font-size:15px;font-weight:500;padding:10px 17px;border:1px solid var(--rule);border-radius:999px;white-space:nowrap;color:var(--muted);transition:all .18s}
.chip:hover{border-color:var(--indigo);color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.tally{font-size:13.5px;color:var(--muted);margin:0 0 0 auto;padding-left:8px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:1059px){ .tally{display:none} }

/* ============ work ============ */
/* per case study identity, kept muted to match --indigo's depth rather than a bright accent */
#report-hub{--case:#0E6E78}
#moss{--case:#2F6B45}
#digilence{--case:#5B4A8A}
#thinkempire{--case:#9C4A3A}

.index{list-style:none;margin:0;padding:10px 0 0}
.entry{scroll-margin-top:126px}
.entry{border-bottom:1px solid var(--rule);position:relative}
.entry.is-out{display:none}
.entry::before{content:"";position:absolute;inset:0 calc(var(--pad)*-1);background:linear-gradient(90deg, color-mix(in srgb, var(--case) 20%, transparent), color-mix(in srgb, var(--case) 2%, transparent));opacity:0;transition:opacity .3s;pointer-events:none}
.entry:hover::before{opacity:1}
.entry-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;width:100%;text-align:left;padding:28px 0;transition:padding-left .36s cubic-bezier(.22,.61,.36,1)}
.entry:hover .entry-head{padding-left:12px}
.entry-no{font-family:var(--display);font-size:1.15rem;color:var(--case);display:block;margin-bottom:6px;transition:color .3s;opacity:.75}
.entry:hover .entry-no{opacity:1}
.entry-name{display:block;font-family:var(--display);font-size:2.1rem;line-height:1.1;letter-spacing:-.012em;color:var(--case);transition:color .25s}
@media (min-width:760px){ .entry-name{font-size:3.1rem} }
.entry:hover .entry-name{color:color-mix(in srgb, var(--case) 78%, white)}
.entry-note{display:block;font-size:1.16rem;color:var(--muted);margin-top:10px;max-width:46ch;line-height:1.55}
.sigil{width:34px;height:34px;border:1px solid var(--rule);border-radius:50%;position:relative;flex:none;transition:all .3s cubic-bezier(.34,1.4,.64,1)}
.sigil::before,.sigil::after{content:"";position:absolute;background:var(--case);transition:opacity .2s,background .2s}
.sigil::before{left:9px;right:9px;top:16px;height:1.5px}
.sigil::after{top:9px;bottom:9px;left:16px;width:1.5px}
.entry:hover .sigil{border-color:var(--case)}
.entry-head[aria-expanded="true"] .sigil{background:var(--case);border-color:var(--case);transform:rotate(135deg)}
.entry-head[aria-expanded="true"] .sigil::before{background:var(--paper)}
.entry-head[aria-expanded="true"] .sigil::after{background:var(--paper)}

.detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1)}
.entry.is-open .detail{grid-template-rows:1fr}
.detail-inner{overflow:hidden}
.detail-body{padding:2px 0 40px}
@media (min-width:900px){ .detail-body{padding-left:12px} }

.meta{display:flex;flex-wrap:wrap;gap:7px 22px;font-size:15px;color:var(--muted);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin:0 0 26px}
.meta b{color:var(--ink);font-weight:600}

.block{margin:0 0 30px;max-width:64ch}
.block h3{font-family:var(--display);font-size:2rem;font-weight:400;margin:0 0 12px;color:var(--case);letter-spacing:-.01em}
.block p{margin:0 0 16px;line-height:1.7;font-size:1.13rem}
.block p:last-child{margin-bottom:0}
.pull{font-family:var(--display);font-size:1.9rem;line-height:1.3;color:var(--case);border-left:3px solid var(--case);padding-left:18px;margin:24px 0;max-width:36ch}

/* metrics */
.metrics{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad)*-1) 30px;padding:0 var(--pad)}
.metrics::-webkit-scrollbar{display:none}
.metric{flex:none;scroll-snap-align:start;width:min(58vw,200px);border:1px solid var(--rule);background:rgba(232,224,199,.5);padding:15px;text-align:left;transition:all .3s cubic-bezier(.22,.61,.36,1)}
.metric:hover{transform:translateY(-3px);border-color:var(--case)}
.metric[aria-expanded="true"]{border-color:var(--case);background:color-mix(in srgb, var(--case) 9%, transparent)}
.metric b{display:block;font-family:var(--display);font-size:2.8rem;line-height:1;color:var(--case)}
.metric i{display:block;font-style:normal;font-size:14.5px;color:var(--muted);margin-top:7px;line-height:1.35}
.metric u{display:block;text-decoration:none;font-size:15.5px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .2s,margin-top .3s}
.metric[aria-expanded="true"] u{max-height:220px;opacity:1;margin-top:10px}
@media (min-width:760px){ .metrics{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding:0} .metric{width:calc(25% - 7px)} }

/* deck */
.deck{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--pad)*-1);padding:0 var(--pad) 4px}
.deck::-webkit-scrollbar{display:none}
.slide{flex:none;scroll-snap-align:center;width:min(78vw,320px);border:1px solid var(--rule);background:rgba(232,224,199,.5);padding:19px;transition:transform .3s,border-color .25s}
.slide:hover{transform:translateY(-3px);border-color:var(--case)}
.slide h4{font-size:1.16rem;font-weight:600;margin:0 0 8px;color:var(--ink)}
.slide .num{font-family:var(--display);font-size:1.1rem;color:var(--case);display:block;margin-bottom:7px}
.slide p{margin:0;font-size:1.08rem;color:var(--muted);line-height:1.58}
.dots{display:flex;gap:5px;margin:12px 0 0;justify-content:center}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--rule);transition:all .2s}
.dots i.on{background:var(--case);transform:scale(1.4)}

/* compare */
.compare{border:1px solid var(--rule);background:rgba(232,224,199,.5);margin:0 0 8px;max-width:64ch}
.seg{display:flex;border-bottom:1px solid var(--rule)}
.seg button{flex:1;font-size:14.5px;font-weight:600;padding:12px 8px;color:var(--muted);border-right:1px solid var(--rule);transition:all .18s}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--case);color:var(--paper)}
.compare-body{padding:17px}
.pane{display:none}
.pane.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.insight{background:var(--paper);border:1px solid var(--rule);padding:14px}
.insight.flag{border-left:3px solid var(--case)}
.insight .h{font-size:16.5px;font-weight:600;margin:0 0 6px;line-height:1.35}
.insight .t{margin:0;font-size:1.08rem;color:var(--muted);line-height:1.55}
.insight .src{font-size:13.5px;color:var(--case);margin:10px 0 0;font-weight:600}
.prompt{background:var(--paper);border:1px solid var(--rule);padding:16px;font-size:16px;line-height:1.55}
.prompt .plabel{color:var(--muted);display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.verdict{font-size:14.5px;line-height:1.6;margin:13px 0 0;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px}
.verdict b{color:var(--ink)}

/* before after */
.ba{position:relative;border:1px solid var(--rule);overflow:hidden;background:var(--paper-2);touch-action:pan-y;max-width:64ch}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba svg{width:100%;height:auto;display:block}
.ba .after svg{height:100%}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.ba .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--case);pointer-events:none}
.ba .handle::after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:var(--case);box-shadow:0 0 0 3px var(--paper)}
.ba .lab{position:absolute;top:8px;font-size:12.5px;font-weight:600;background:var(--paper);border:1px solid var(--rule);padding:3px 8px;pointer-events:none}
.ba .lab.l{left:8px}.ba .lab.r{right:8px}

/* stepper */
.step{border:1px solid var(--rule);background:rgba(232,224,199,.5);max-width:64ch}
.step-body{padding:19px;min-height:168px}
.step-n{font-family:var(--display);font-size:1.1rem;color:var(--case);margin:0 0 8px}
.step-body h4{font-size:1.2rem;font-weight:600;margin:0 0 8px;color:var(--ink)}
.step-body p{margin:0;font-size:1.1rem;color:var(--muted);line-height:1.62}
.step-nav{display:flex;align-items:center;gap:12px;border-top:1px solid var(--rule);padding:9px 11px}
.step-nav button{font-size:14.5px;font-weight:600;padding:8px 14px;border:1px solid var(--rule);border-radius:999px;transition:all .2s}
.step-nav button:hover:not([disabled]){border-color:var(--case);background:var(--case);color:var(--paper)}
.step-nav button[disabled]{opacity:.3}
.step-track{flex:1;display:flex;gap:3px}
.step-track i{flex:1;height:2px;background:var(--rule);transition:background .3s}
.step-track i.on{background:var(--case)}

/* reveal list */
.qs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);max-width:64ch}
.qs li{border-bottom:1px solid var(--rule)}
.qs button{display:flex;gap:13px;align-items:baseline;width:100%;text-align:left;padding:17px 0;font-size:1.15rem;font-weight:500;line-height:1.4;transition:padding-left .3s,color .25s}
.qs button:hover{padding-left:8px;color:var(--case)}
.qs button i{color:var(--case);flex:none;font-size:13px;font-style:normal}
.qs .a{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s,opacity .2s;font-size:1.08rem;color:var(--muted);line-height:1.62}
.qs li.on .a{max-height:240px;opacity:1;padding:0 0 15px}

.shot{border:1px solid var(--rule);background:var(--paper-2);margin:0 0 26px;max-width:64ch}
.shot .frame{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px;text-align:center;padding:18px}

.diagram{border:1px solid var(--rule);background:var(--paper);margin:20px 0 26px;padding:18px;max-width:36em}
.diagram svg{width:100%;display:block}
.diagram figcaption{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}

/* ============ report hub demo ============ */
.rh{border:1px solid var(--rule);background:var(--paper-2);padding:16px;margin:0 0 26px}
.rh-bar{display:flex;flex-direction:column;gap:10px}
.rh-search{width:100%;padding:10px 14px;border:1px solid var(--rule);background:var(--paper);font:inherit;font-size:15px;color:var(--ink);border-radius:4px}
.rh-search:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.rh-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.rh-chips::-webkit-scrollbar{display:none}
.rh-cat{flex:none;font-size:13px;font-weight:500;padding:7px 13px;border:1px solid var(--rule);border-radius:999px;white-space:nowrap;color:var(--muted);transition:all .18s;background:none;font-family:inherit;cursor:pointer}
.rh-cat:hover{border-color:var(--indigo);color:var(--ink)}
.rh-cat[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.rh-tally{margin:12px 0 0;font-size:13px;color:var(--muted)}
.rh-link{background:none;border:0;color:var(--bright);font-weight:600;cursor:pointer;padding:0;font-size:13px;font-family:inherit}
.rh-link:hover{color:var(--indigo)}
.rh-body{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media (min-width:760px){ .rh-body{grid-template-columns:1.3fr 1fr} }
.rh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:560px;overflow-y:auto}
.rh-card{border:1px solid var(--rule);background:var(--paper);padding:12px 14px;cursor:pointer;transition:border-color .2s;list-style:none}
.rh-card:hover{border-color:var(--indigo)}
.rh-card.on{border-color:var(--bright);background:rgba(125,120,112,.06)}
.rh-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.rh-card h4{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.rh-card p{margin:5px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.rh-tag{display:inline-block;margin-top:8px;font-size:11px;font-weight:600;color:var(--bright);background:rgba(125,120,112,.1);padding:3px 8px;border-radius:999px}
.rh-card-actions{display:flex;align-items:center;gap:8px;flex:none}
.rh-star{border:0;background:none;padding:2px;font-size:18px;line-height:1;cursor:pointer;color:var(--rule)}
.rh-star.on{color:var(--accent)}
.rh-combine{width:16px;height:16px;accent-color:var(--indigo);margin:0}
.rh-preview{border:1px solid var(--rule);background:var(--paper);padding:16px;font-size:14px}
.rh-empty{color:var(--muted);font-size:13.5px;margin:0}
.rh-preview h4{margin:0 0 4px;font-size:16px}
.rh-owner{font-size:13px;color:var(--muted);margin:0 0 12px}
.rh-owner a{color:var(--bright);text-decoration:none}
.rh-owner a:hover{text-decoration:underline}
.rh-desc{font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 14px}
.rh-chart{margin-bottom:14px}
.rh-preview-actions{display:flex;gap:8px;flex-wrap:wrap}
.rh-btn{font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--indigo);border-radius:999px;background:none;color:var(--indigo);cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.rh-btn:hover{background:var(--indigo);color:var(--paper)}
.rh-btn.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.rh-combined{border:1px dashed var(--rule);padding:10px;margin-top:14px;font-size:13px;color:var(--muted)}
.rh-combined h5{margin:0 0 6px;font-size:13px;color:var(--ink)}
.rh-combined ul{margin:0;padding-left:18px}

/* ============ digilence demo ============ */
.dg{border:1px solid var(--rule);background:var(--paper-2);padding:16px;margin:0 0 26px}
.dg-tabs{position:relative;display:flex;gap:6px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px;margin-bottom:16px;max-width:420px}
.dg-tab{position:relative;z-index:1;flex:1;background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);padding:9px 4px;border-radius:999px;cursor:pointer;transition:color .3s}
.dg-tab[aria-selected="true"]{color:var(--paper)}
.dg-indicator{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(33.333% - 4px);background:var(--indigo);border-radius:999px;transition:transform .38s cubic-bezier(.22,.61,.36,1);z-index:0}

.dg-subtabs{position:relative;display:flex;gap:6px;background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:4px;margin-bottom:16px;max-width:420px}
.dg-subtab{position:relative;z-index:1;flex:1;background:none;border:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:8px 4px;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.dg-subtab[aria-selected="true"]{color:var(--paper)}
.dg-indicator-sm{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(33.333% - 4px);background:var(--accent);border-radius:999px;transition:transform .38s cubic-bezier(.22,.61,.36,1);z-index:0}

.dg-views,.dg-subviews{position:relative}
.dg-view,.dg-subview{display:none}
.dg-view.on,.dg-subview.on{display:block;animation:dgIn .32s cubic-bezier(.22,.61,.36,1) both}
.dg-view.leaving,.dg-subview.leaving{display:block;position:absolute;inset:0 0 auto 0;animation:dgOut .18s ease both}
@keyframes dgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dgOut{to{opacity:0;transform:translateY(-6px)}}

.dg-hint{margin:0 0 12px;font-size:13px;color:var(--muted)}
.dg-row-between{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

.dg-inbox{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dg-msg{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);background:var(--paper);padding:10px 12px;animation:dgIn .4s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 50ms);transition:max-height .35s cubic-bezier(.22,.61,.36,1),opacity .3s,padding .35s,margin .35s,border-color .3s;max-height:70px;overflow:hidden}
.dg-msg.done b{color:var(--muted);text-decoration:line-through}
.dg-msg.done i{color:var(--muted)}
.dg-msg.collapsed{max-height:0;padding:0 12px;margin:0;opacity:0;border-width:0}
.dg-badge{flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 8px;border-radius:999px;background:rgba(71,68,63,.1);color:var(--indigo)}
.dg-badge.auto{background:rgba(255,184,126,.28);color:#7a4a1a}
.dg-msg-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dg-msg-body b{font-size:14px;font-weight:600;color:var(--ink);transition:color .3s}
.dg-msg-body i{font-style:normal;font-size:12px;color:var(--muted)}
.dg-check{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);cursor:pointer;position:relative;transition:border-color .25s,background .25s}
.dg-check::after{content:"";position:absolute;inset:0;background:no-repeat center/12px 10px;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.dg-msg.done .dg-check{background:var(--indigo);border-color:var(--indigo)}
.dg-msg.done .dg-check::after{transform:scale(1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.2 3.2L11 1' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dg-empty{text-align:center;padding:20px 0 4px}

.dg-progress{height:8px;border-radius:999px;background:var(--paper);border:1px solid var(--rule);overflow:hidden;margin-bottom:8px}
.dg-progress span{display:block;height:100%;width:0%;background:var(--bright);border-radius:999px;transition:width .45s cubic-bezier(.22,.61,.36,1)}
.dg-progress-label{margin:0 0 14px;font-size:12.5px;color:var(--muted)}
.dg-progress-label b{color:var(--ink);font-size:14px}

.dg-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dg-checklist li{border:1px solid var(--rule);background:var(--paper);padding:10px 12px;animation:dgIn .4s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.dg-checklist label{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);cursor:pointer}
.dg-checklist input{width:16px;height:16px;accent-color:var(--indigo)}
.dg-checklist input:checked ~ *{color:var(--muted)}

.dg-team{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dg-person{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);background:var(--paper);padding:9px 12px;animation:dgIn .4s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.dg-avatar{flex:none;width:30px;height:30px;border-radius:50%;background:var(--indigo);color:var(--paper);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.dg-person-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dg-person-body b{font-size:13.5px;color:var(--ink)}
.dg-person-body i{font-style:normal;font-size:11.5px;color:var(--muted)}
.dg-status{flex:none;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;transition:background .3s,color .3s}
.status-progress .dg-status{background:rgba(255,184,126,.28);color:#7a4a1a}
.status-review .dg-status{background:rgba(125,120,112,.14);color:var(--bright)}
.status-done .dg-status{background:rgba(71,68,63,.12);color:var(--indigo)}
.dg-status.pulse{animation:dgPulse .4s ease}
@keyframes dgPulse{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}

.dg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.dg-stat{border:1px solid var(--rule);background:var(--paper);padding:14px 10px;text-align:center;animation:dgIn .4s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.dg-stat b{display:block;font-family:var(--display);font-size:2rem;line-height:1;color:var(--indigo)}
.dg-stat i{font-style:normal;font-size:11.5px;color:var(--muted);display:block;margin-top:4px}
.dg-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink)}
.dg-switch{flex:none;width:42px;height:24px;border-radius:999px;border:1px solid var(--rule);background:var(--rule);position:relative;cursor:pointer;transition:background .3s,border-color .3s}
.dg-switch.on{background:var(--indigo);border-color:var(--indigo)}
.dg-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--paper);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.dg-switch.on .dg-knob{transform:translateX(18px)}

.dg-clients-head{display:flex;gap:10px;margin-bottom:12px}
.dg-clients-head input{flex:1;padding:10px 14px;border:1px solid var(--rule);background:var(--paper);font:inherit;font-size:13.5px;color:var(--ink);border-radius:4px}
.dg-clients-head input:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.dg-add{flex:none;font-size:13px;font-weight:600;padding:9px 14px;border:1px solid var(--indigo);border-radius:999px;background:none;color:var(--indigo);cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.dg-add:hover{background:var(--indigo);color:var(--paper)}
.dg-clients{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dg-client{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);background:var(--paper);padding:11px 14px;animation:dgIn .4s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--i,0) * 60ms)}
.dg-client-body{flex:1;min-width:0}
.dg-client-body b{display:block;font-size:14px;color:var(--ink)}
.dg-client-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.dg-client-body a{color:var(--bright);text-decoration:none}
.dg-client-body a:hover{text-decoration:underline}
.dg-client-tag{flex:none;font-size:11px;font-weight:600;color:var(--bright);background:rgba(125,120,112,.1);padding:4px 9px;border-radius:999px}
.dg-toast{margin-top:10px;font-size:12.5px;color:var(--muted);opacity:0;transition:opacity .3s}
.dg-toast.on{opacity:1}

.dg-soon-head{margin:20px 0 10px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.dg-soon{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dg-soon li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);border:1px dashed var(--rule);padding:6px 11px;border-radius:999px}
.dg-soon i{font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--rule);background:var(--paper);padding:2px 6px;border-radius:999px;border:1px solid var(--rule)}

/* ============ about ============ */
.about{border-top:1px solid var(--rule);margin-top:56px;padding:52px 0 0}
@media (min-width:900px){ .about{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:64px} }
.about h2{font-family:var(--display);font-size:2.7rem;font-weight:400;margin:0 0 18px;color:var(--indigo);letter-spacing:-.012em}
.about p{margin:0 0 18px;max-width:54ch;font-size:1.13rem;line-height:1.7}
.contact{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.btn{position:relative;overflow:hidden;z-index:0;font-size:15.5px;font-weight:600;padding:13px 24px;border:1px solid var(--indigo);border-radius:999px;text-decoration:none;display:inline-block;color:var(--indigo);transition:color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--indigo);transform:translateY(101%);transition:transform .36s cubic-bezier(.22,.61,.36,1)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--paper)}
.btn-solid{background:var(--indigo);color:var(--paper)}
.btn-solid::before{background:var(--bright)}
.copied{font-size:14px;color:var(--bright);align-self:center;opacity:0;transition:opacity .2s}
.copied.on{opacity:1}
.links{list-style:none;margin:0;padding:0;font-size:1.12rem}
.links li{border-bottom:1px solid var(--rule)}
.links a{display:flex;justify-content:space-between;padding:16px 0;text-decoration:none;color:var(--muted);transition:color .25s,padding-left .3s}
.links a:hover{color:var(--indigo);padding-left:6px}

footer{border-top:1px solid var(--rule);margin-top:52px;padding:22px 0 0;font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.sign{display:flex;justify-content:center;padding:20px 0 36px}
.sign span{display:block;width:22px;height:29px;background:url("/favicon.svg") center/contain no-repeat;opacity:.8;transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.sign:hover span{transform:translateY(-4px)}

.closing{position:relative;isolation:isolate;margin-top:56px;padding-top:44px}
.closing::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  z-index:-1;background:linear-gradient(180deg,var(--paper) 0%,#7E8894 9%,#4B5563 52%,#2E3440 100%);
}
.closing-line{width:1px;height:70px;background:rgba(240,234,214,.4);margin:0 auto 48px}
.closing .about{border-top:0;margin-top:0;padding-top:0}
.closing .about h2{color:var(--paper)}
.closing .about p{color:rgba(240,234,214,.82)}
.closing .btn{border-color:rgba(240,234,214,.5);color:var(--paper)}
.closing .btn::before{background:rgba(240,234,214,.5)}
.closing .btn:hover{color:var(--ink)}
.closing .btn-solid{background:var(--bright);color:var(--paper);border-color:var(--bright)}
.closing .btn-solid::before{background:var(--paper)}
.closing .btn-solid:hover{color:var(--indigo)}
.closing .copied{color:var(--paper)}
.closing .links li{border-bottom-color:rgba(240,234,214,.22)}
.closing .links a{color:rgba(240,234,214,.75)}
.closing .links a:hover{color:var(--paper)}
.closing footer{border-top-color:rgba(240,234,214,.22);color:rgba(240,234,214,.6)}
.closing .sign span{filter:brightness(0) invert(1);opacity:.6}


/* ============ numbers ============ */
.band{
  position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 14px;
  margin:20px 0 0;padding:22px 0 20px;border-top:0;
}
.band::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);
  z-index:-1;background:var(--indigo);
}
@media (min-width:760px){ .band{grid-template-columns:repeat(4,1fr);gap:16px} }
.band div{text-align:center;position:relative;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
.band div:hover{transform:translateY(-3px)}
.band dt{
  font-family:var(--display);font-size:clamp(1.7rem,5.6vw,2.5rem);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums;transition:color .28s;
}
.band div:hover dt{color:#FFF3E7}
.band dd{margin:7px 0 0;font-size:12.5px;line-height:1.4;color:rgba(240,234,214,.86);max-width:21ch;margin-inline:auto}

.entry-stat{display:block;margin-top:13px;font-size:14.5px;color:var(--muted);transition:color .28s}
.entry-stat b{
  font-family:var(--display);font-size:1.65rem;font-weight:400;color:var(--case);
  margin-right:6px;font-variant-numeric:tabular-nums;transition:color .28s;
}
.entry:hover .entry-stat{color:var(--ink)}

.ticker{
  list-style:none;display:flex;flex-wrap:wrap;gap:12px 30px;margin:0 0 24px;padding:0 0 20px;
  border-bottom:1px solid var(--rule);
}
.ticker li{display:flex;align-items:baseline;gap:8px;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.ticker li:hover{transform:translateY(-2px)}
.ticker b{font-family:var(--display);font-size:1.92rem;color:var(--case);font-variant-numeric:tabular-nums;transition:color .25s}
.ticker li:hover b{color:color-mix(in srgb, var(--case) 78%, white)}
.ticker span{font-size:13.5px;color:var(--muted);max-width:18ch;line-height:1.4}

/* ============ more hover ============ */
.wordmark{transition:letter-spacing .34s cubic-bezier(.22,.61,.36,1)}
.drop{
  display:inline-block;width:11px;height:15px;flex:none;margin-right:9px;
  background:url("/favicon.svg") center/contain no-repeat;
  transition:transform .42s cubic-bezier(.34,1.4,.64,1);
}
.wordmark:hover .drop{transform:translateY(-3px)}
.wordmark:hover{letter-spacing:.035em}
.block h3{position:relative;display:inline-block}
.block h3::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--case);
  transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.detail-body:hover .block h3::after{transform:scaleX(1)}
.pull{transition:border-color .3s,padding-left .34s cubic-bezier(.22,.61,.36,1)}
.pull:hover{border-color:var(--case);padding-left:24px}
.insight{transition:transform .3s cubic-bezier(.22,.61,.36,1),border-color .25s}
.insight:hover{transform:translateY(-2px);border-color:var(--case)}
.prompt{transition:border-color .25s,background .25s}
.prompt:hover{border-color:var(--case)}
.meta span{transition:color .25s}
.meta span:hover{color:var(--case)}
.shot{transition:border-color .3s}
.shot:hover{border-color:var(--case)}
.ba{transition:border-color .3s}
.ba:hover{border-color:var(--case)}
.step{transition:border-color .3s}
.step:hover{border-color:var(--case)}
.sigil::before,.sigil::after{transition:opacity .2s,background .2s,transform .3s}
.entry:hover .sigil{transform:scale(1.08)}
.links a span{display:inline-block;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.links a:hover span{transform:translate(3px,-3px)}
.chip{position:relative}
.footer-note{transition:color .25s}


/* accent is decorative only, it never signals state */
.band div::after{
  content:"";position:absolute;left:50%;bottom:-14px;width:26px;height:2px;margin-left:-13px;
  background:var(--accent);transform:scaleX(0);transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.band div:hover::after{transform:scaleX(1)}

.ticker li::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--case);
  transform:scaleX(0);transform-origin:left;transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.ticker li{position:relative}
.ticker li:hover::after{transform:scaleX(1)}
.metric{border-top:3px solid var(--case)}
.slide{border-top:3px solid var(--case)}
.entry-no::after{
  content:"";display:inline-block;width:20px;height:1px;background:var(--case);
  vertical-align:middle;margin-left:9px;transition:width .34s cubic-bezier(.22,.61,.36,1);
}
.entry:hover .entry-no::after{width:38px}
.sign span{filter:none}
.chip:hover{background:rgba(255,184,126,.26)}
.qs li:hover{background:rgba(255,184,126,.14)}
.links a:hover{background:rgba(255,184,126,.18)}
.links a{padding-inline:8px;margin-inline:-8px}

/* reading comfort */
.detail-body{font-size:1.12rem}
.block{max-width:62ch}

/* ============ load ============ */
#boot{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:opacity .55s ease .1s,visibility .55s ease .1s}
#boot.gone{opacity:0;visibility:hidden}
#boot span{display:block;width:64px;height:64px;border-radius:50%;border:1px solid var(--indigo);animation:spread 1.15s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes spread{0%{transform:scale(.25);opacity:1}100%{transform:scale(1.7);opacity:0}}
.rise{opacity:0;transform:translateY(15px)}
.ready .rise{animation:rise .8s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1;transform:none}}
.veil{opacity:0;transform:translateY(20px);transition:opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1)}
.veil.seen{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .rise,.veil{opacity:1!important;transform:none!important}
  #boot{display:none}
}