/* Foundation page: memory filed into a workspace, and the roadmap scenes. */
.ws { grid-area: mvp; position: relative; background: #fff; border: var(--line); border-radius: 22px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.ws-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; background: var(--ink); color: var(--paper); }
.ws-t { font-weight: 800; letter-spacing: -.02em; }
.ws-count { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 253, 247, .7); }
.ws-count b { color: var(--yellow); font-size: .9rem; } .ws-count b.ws-lost { color: var(--mint); }
.ws-body { display: grid; grid-template-columns: 9.5rem 1fr; min-height: 400px; }
.ws-side { display: grid; align-content: start; gap: .2rem; padding: 1rem .8rem; border-right: var(--line); background: #fbf7ea; }
.ws-side p { font-weight: 800; font-size: .9rem; margin-bottom: .4rem; }
.ws-side span { font-size: .82rem; font-weight: 600; padding: .35rem .55rem; border-radius: 8px; color: var(--ink-2); }
.ws-side span.on { background: var(--yellow); color: var(--ink); border: 1.5px solid var(--ink); }
.ws-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding: 1rem; background-color: var(--paper); background-image: radial-gradient(rgba(13, 20, 33, .1) 1px, transparent 1.2px); background-size: 18px 18px; }
.ws-col { display: flex; flex-direction: column; gap: .45rem; padding: .55rem; border: 1.5px dashed rgba(13, 20, 33, .25); border-radius: 12px; background: rgba(255, 255, 255, .7); }
.ws-col > p { font-family: var(--f-mono); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.ws-cards { display: flex; flex-direction: column; gap: .45rem; }
.wcard { display: block; width: 100%; text-align: left; padding: .5rem .6rem; border: var(--line); border-radius: 9px; background: #fff; box-shadow: 2px 2px 0 var(--ink); font-size: .8rem; font-weight: 700; line-height: 1.25; cursor: pointer; transition: background-color .2s; }
.wcard small { display: block; margin-top: .2rem; font-family: var(--f-mono); font-size: .56rem; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.wcard:hover { background: #fff7d6; }
.ws-col:nth-child(2) .wcard { background: #fff7d6; }
.ws-col:nth-child(3) .wcard { background: #d6f7ec; }
.wcard.new { visibility: hidden; }
.wcard.gone { animation: gone .45s var(--ease-out) forwards; }
@keyframes gone { to { opacity: 0; transform: scale(.85); } }
.ws-mem { position: absolute; inset: 0; pointer-events: none; }
.frag { position: absolute; left: 0; top: 0; max-width: 12.5rem; padding: .45rem .65rem; font-size: .78rem; font-weight: 600; line-height: 1.25; border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.frag.chat { background: #e3f6ff; border-radius: 12px 12px 12px 3px; }
.frag.file { background: #fff; border-radius: 6px; font-family: var(--f-mono); font-size: .7rem; }
.frag.file::before { content: "▤ "; color: var(--mint-d); }
.frag.note { background: #fff3a6; border-radius: 3px; font-family: var(--f-serif); font-style: italic; font-size: .98rem; font-weight: 400; }
.frag.head { background: #ffe6f0; border-radius: 999px; }
.frag.head::before { content: "🧠 "; }
.ws-hint { position: absolute; right: 1rem; bottom: .6rem; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* roadmap scenes */
.mini-ws { display: grid; grid-template-columns: 8rem 1fr; gap: .8rem; }
.mw-side { display: grid; align-content: start; gap: .2rem; padding: .7rem; border: var(--line); border-radius: 12px; background: #fbf7ea; }
.mw-side p { font-weight: 800; font-size: .85rem; }
.mw-side span { font-size: .76rem; font-weight: 600; padding: .3rem .45rem; border-radius: 7px; }
.mw-side span.on { background: var(--yellow); border: 1.5px solid var(--ink); }
.mw-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-content: start; }
.mw-board > div { display: grid; gap: .4rem; align-content: start; padding: .5rem; border: 1.5px dashed rgba(13, 20, 33, .25); border-radius: 10px; background: rgba(255, 255, 255, .75); min-height: 180px; }
.mw-board p { font-family: var(--f-mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mw-board i { font-style: normal; font-size: .76rem; font-weight: 700; padding: .45rem .5rem; border: var(--line); border-radius: 8px; background: #fff; box-shadow: 2px 2px 0 var(--ink); animation: pop2 .5s var(--spring) both; }
.mw-board i.y { background: #fff7d6; } .mw-board i.m { background: #d6f7ec; }
.mw-board i:nth-of-type(2) { animation-delay: .12s; }
.mw-board.sm > div { min-height: 0; }
@keyframes pop2 { from { transform: translateY(10px) scale(.9); opacity: 0; } }
.hub { position: relative; }
.hb-c { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: grid; place-items: center; border: var(--line); border-radius: 22px; background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--yellow); }
.hb-c svg { width: 56px; height: 56px; }
.hb-c::before, .hb-c::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--ink); border-radius: 22px; animation: ring 2.4s var(--ease-out) infinite; }
.hb-c::after { animation-delay: 1.2s; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
.hb-n { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; transform: rotate(var(--a)) translateY(-150px) rotate(calc(var(--a) * -1)) translate(-50%, -50%); transform-origin: 0 0; }
.hb-n img { width: 58px; height: 58px; padding: 10px; border: var(--line); border-radius: 16px; background: #fff; box-shadow: 3px 3px 0 var(--ink); object-fit: contain; animation: bob 3s ease-in-out infinite; }
.hb-n:nth-child(3) img { animation-delay: -.75s; } .hb-n:nth-child(4) img { animation-delay: -1.5s; } .hb-n:nth-child(5) img { animation-delay: -2.25s; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.dash .dk { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.dash .dk span { padding: .6rem .7rem; border: var(--line); border-radius: 12px; background: #fff; font-family: var(--f-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dash .dk b { display: block; font-family: var(--f-sans); font-size: 1.6rem; letter-spacing: -.04em; color: var(--ink); }
.dash .dk b.od { color: #c2185b; }
.dl { margin-top: .9rem; font-family: var(--f-mono); font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dprog { margin-top: .4rem; height: 14px; border: var(--line); border-radius: 999px; background: #fff; overflow: hidden; }
.dprog i { display: block; height: 100%; width: 64%; background: var(--mint); border-right: 2px solid var(--ink); animation: grow 1.4s var(--ease-out) both; transform-origin: 0 50%; }
@keyframes grow { from { transform: scaleX(0); } }
.dcharts { display: grid; grid-template-columns: 1.4fr 1fr; gap: .8rem; }
.dbars { margin-top: .4rem; height: 130px; display: flex; align-items: flex-end; gap: .4rem; padding: .5rem; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; }
.dbars i { flex: 1; height: calc(var(--h) * 100%); background: var(--blue); border: 1.5px solid var(--ink); border-radius: 4px 4px 0 0; transform-origin: 50% 100%; animation: growY 1.1s var(--spring) both; }
.dbars i:nth-child(2) { animation-delay: .08s; background: var(--yellow); } .dbars i:nth-child(3) { animation-delay: .16s; background: var(--pink); } .dbars i:nth-child(4) { animation-delay: .24s; } .dbars i:nth-child(5) { animation-delay: .32s; background: var(--mint); }
@keyframes growY { from { transform: scaleY(0); } }
.donut { margin: .4rem auto 0; width: 120px; aspect-ratio: 1; border-radius: 50%; border: var(--line); background: radial-gradient(circle at center, #fff 0 38%, transparent 39%), conic-gradient(var(--pink) 0 22%, var(--yellow) 22% 58%, var(--mint) 58% 100%); animation: spinIn 1.2s var(--spring) both; }
@keyframes spinIn { from { transform: rotate(-120deg) scale(.7); opacity: 0; } }
.sopd h4 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; }
.sd { margin-top: .8rem; padding: .7rem .8rem; border: var(--line); border-radius: 12px; background: #fff; display: grid; gap: .35rem; }
.sd b { font-size: .92rem; }
.sd span { display: flex; gap: .5rem; align-items: center; font-size: .82rem; color: var(--ink-2); }
.sd span::before { content: ""; flex: none; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; animation: chk 6s steps(1) infinite; }
.sd:nth-of-type(1) span:nth-of-type(1)::before { animation-delay: 0s; } .sd:nth-of-type(1) span:nth-of-type(2)::before { animation-delay: .6s; }
.sd:nth-of-type(2) span:nth-of-type(1)::before { animation-delay: 1.2s; } .sd:nth-of-type(2) span:nth-of-type(2)::before { animation-delay: 1.8s; }
.sd:nth-of-type(3) span:nth-of-type(1)::before { animation-delay: 2.4s; } .sd:nth-of-type(3) span:nth-of-type(2)::before { animation-delay: 3s; }
@keyframes chk { 0% { background: #fff; } 1% { background: var(--mint); } 85% { background: var(--mint); } 86%, 100% { background: #fff; } }
.ask-box { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .7rem .9rem; border: var(--line); border-radius: 14px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font-weight: 700; }
.ask-box img { width: 22px; height: 22px; }
.ask-box span { overflow: hidden; white-space: nowrap; border-right: 3px solid var(--ink); width: 0; animation: typeIn 2.4s steps(26) .3s forwards, caretB .8s step-end infinite; }
@keyframes typeIn { to { width: 26ch; } }
@keyframes caretB { 50% { border-color: transparent; } }
.ask-ans { margin-top: .8rem; display: grid; gap: .4rem; padding: .8rem .9rem; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: .84rem; }
.ask-ans li { display: flex; gap: .5rem; opacity: 0; animation: fadeUp .5s var(--ease-out) forwards; }
.ask-ans li::before { content: "→"; color: var(--yellow); }
.ask-ans li:nth-child(1) { animation-delay: 2.9s; } .ask-ans li:nth-child(2) { animation-delay: 3.3s; } .ask-ans li:nth-child(3) { animation-delay: 3.7s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* how-it-works visuals */

.viz { margin-top: 1.1rem; padding: .7rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); font-size: .74rem; }
.v-now { display: flex; flex-wrap: wrap; gap: .3rem; }
.v-now span { padding: .25rem .5rem; border: 1.5px dashed var(--ink); border-radius: 7px; background: #fff; font-weight: 700; transform: rotate(calc((var(--r, 1)) * 1deg)); }
.v-now span:nth-child(2n) { --r: -2; } .v-now span:nth-child(3n) { --r: 3; }
.v-now em { font-style: normal; font-family: var(--f-mono); font-size: .6rem; font-weight: 700; padding: .2rem .45rem; border-radius: 6px; background: #ffe6f0; color: #c2185b; }
.v-tree { display: grid; gap: .25rem; }
.v-tree span { margin-left: calc(var(--l) * .8rem); padding: .25rem .5rem; border: 1.5px solid var(--ink); border-radius: 7px; background: #fff; font-weight: 700; position: relative; }
.v-tree span:first-child { background: var(--yellow); }
.v-ads p { font-weight: 700; margin-bottom: .4rem; } .v-ads p b { font-size: 1.1rem; }
.v-ads span { display: flex; justify-content: space-between; margin-top: .3rem; padding: .2rem .45rem; border-radius: 6px; font-family: var(--f-mono); font-size: .64rem; background: linear-gradient(90deg, var(--blue) calc(var(--w) * 100%), #fff 0); border: 1.5px solid var(--ink); }
.viz.mw-board > div { min-height: 0; padding: .35rem; }
.viz.mw-board i { font-size: .66rem; padding: .3rem .35rem; }

@media (max-width: 600px) {
  .ws-body { grid-template-columns: 1fr; min-height: 360px; }
  .ws-side { display: none; }
  .ws-board { padding: .6rem; gap: .4rem; }
  .ws-col { padding: .4rem; }
  .wcard { font-size: .7rem; padding: .4rem .45rem; }
  .frag { font-size: .68rem; max-width: 10rem; }
  .mini-ws { grid-template-columns: 1fr; }
  .mw-side { display: none; }
  .mw-board > div { min-height: 0; }
  .hb-n { transform: rotate(var(--a)) translateY(-100px) rotate(calc(var(--a) * -1)) translate(-50%, -50%); }
  .hb-n img { width: 44px; height: 44px; padding: 7px; }
  .dbars { height: 80px; } .donut { width: 80px; }
}