/* Hallmark · custom spatial-maze · genre: playful editorial
 * pre-emit critique: Philosophy 5 · Hierarchy 4 · Execution 4 · Specificity 5 · Restraint 4 · Variety 5
 */
:root {
  --color-paper: #f4efe6;
  --color-paper-deep: #e7ded0;
  --color-ink: #21172d;
  --color-ink-soft: #4c4057;
  --color-white: #fffdf8;
  --color-blue: #4964ff;
  --color-blue-soft: #aebaff;
  --color-orange: #ff6a3d;
  --color-orange-soft: #ffb59e;
  --color-mint: #9be7c3;
  --color-mint-deep: #1e8d69;
  --color-lilac: #c8b5ff;
  --color-yellow: #f5c84b;
  --color-pink: #ff9fc7;
  --color-line: rgba(33, 23, 45, .22);
  --color-line-light: rgba(255, 253, 248, .35);
  --color-shadow: rgba(33, 23, 45, .2);
  --font-display: "Unbounded", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "DM Mono", monospace;
  --ease-room: cubic-bezier(.76, 0, .24, 1);
  --ease-pop: cubic-bezier(.2, .9, .2, 1.12);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overflow-x: clip; }
body { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
a { text-decoration: none; }
::selection { background: var(--color-yellow); color: var(--color-ink); }
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link { position: fixed; z-index: 200; left: 12px; top: 12px; padding: 10px 13px; background: var(--color-ink); color: var(--color-white); font: 500 10px/1 var(--font-mono); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.chrome { position: fixed; z-index: 40; inset: 0 0 auto; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(18px, 3vw, 44px); border-bottom: 1px solid var(--color-line); pointer-events: none; transition: color .5s, border-color .5s; }
.chrome > * { pointer-events: auto; }
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; text-align: left; }
.brand-face { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid currentColor; border-radius: 50%; font: 600 11px/1 var(--font-display); transition: transform .4s var(--ease-pop), background .3s; }
.brand:hover .brand-face { transform: rotate(-12deg) scale(1.08); background: var(--color-yellow); }
.brand-copy { font: 500 10px/1.08 var(--font-display); letter-spacing: .04em; }
.brand-copy small { font: 400 6px/1 var(--font-mono); letter-spacing: .08em; }
.room-title { text-align: center; }
.room-title span { display: block; font: 400 7px/1 var(--font-mono); letter-spacing: .13em; }
.room-title strong { display: block; margin-top: 5px; font: 500 10px/1 var(--font-display); letter-spacing: .05em; }
.top-links { justify-self: end; display: flex; align-items: center; gap: 20px; }
.top-links button, .top-links a { padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 500 8px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
body[data-room="now"] .chrome { color: var(--color-white); border-color: var(--color-line-light); }
body[data-room="now"] .brand:hover .brand-face { color: var(--color-ink); }

.viewport { position: fixed; inset: 0; overflow: hidden; }
.world { position: absolute; left: 0; top: 0; width: 300vw; height: 300svh; transform: translate3d(-100vw, -100svh, 0); transition: transform 900ms var(--ease-room); will-change: transform; }
.world.is-moving .room.is-current .room-shell { transform: scale(.97); }
.room { position: absolute; width: 100vw; height: 100svh; overflow: hidden; }
.room-now { left: 100vw; top: 0; background: var(--color-blue); color: var(--color-white); }
.room-make { left: 0; top: 100svh; background: var(--color-orange-soft); }
.room-home { left: 100vw; top: 100svh; background: var(--color-paper); }
.room-think { left: 200vw; top: 100svh; background: var(--color-lilac); }
.room-share { left: 100vw; top: 200svh; background: var(--color-mint); }
.room-shell { position: relative; width: 100%; height: 100%; padding: 104px clamp(22px, 4vw, 64px) 38px; overflow-y: auto; overscroll-behavior: contain; transition: transform .65s var(--ease-room); }
.room-shell > *:not(.edge-door) { opacity: 0; transform: translateY(26px); transition: opacity .45s .15s, transform .65s .15s var(--ease-pop); }
.room.is-current .room-shell > * { opacity: 1; transform: translateY(0); }
.room.is-current .room-shell > *:nth-child(2) { transition-delay: .22s; }
.room.is-current .room-shell > *:nth-child(3) { transition-delay: .3s; }
.room-meta { position: absolute; z-index: 2; left: clamp(22px, 4vw, 64px); top: 92px; display: flex; gap: 13px; font: 400 8px/1 var(--font-mono); letter-spacing: .1em; }
.room-meta span:first-child { padding-right: 13px; border-right: 1px solid currentColor; }
.eyebrow { margin: 0; font: 500 9px/1 var(--font-mono); letter-spacing: .14em; }

.home-center { position: absolute; z-index: 4; left: 50%; top: 50%; width: min(680px, 63vw); text-align: center; transform: translate(-50%, -51%); }
.home-intro { margin: 0; font: 500 10px/1 var(--font-mono); letter-spacing: .16em; }
.home-intro span { display: inline-block; margin-left: 7px; color: var(--color-orange); animation: twinkle 2.3s ease-in-out infinite; }
.home-center h1 { margin: 26px 0 0; font: 500 clamp(40px, 5.4vw, 82px)/1.03 var(--font-display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.home-center mark { position: relative; z-index: 0; padding: 0 .05em; background: transparent; color: var(--color-blue); }
.home-center mark::after { content: ""; position: absolute; z-index: -1; left: -3%; right: -3%; bottom: .08em; height: .22em; border-radius: 50%; background: var(--color-yellow); transform: rotate(-2deg); }
.home-sub { width: min(470px, 88%); margin: 25px auto 0; color: var(--color-ink-soft); font-size: 12px; line-height: 1.65; }
.enter-prompt { margin-top: 28px; padding: 10px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 500 9px/1 var(--font-mono); letter-spacing: .09em; }
.enter-prompt span { display: inline-block; margin-left: 10px; animation: nudgeDiagonal 1.7s ease-in-out infinite; }
.home-field { position: absolute; inset: 0; overflow: hidden; }
.home-field::before { content: ""; position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(var(--color-line) .7px, transparent .7px); background-size: 19px 19px; }
.shape { position: absolute; display: block; }
.shape-circle { left: 12%; top: 19%; width: 90px; height: 90px; border: 20px solid var(--color-blue-soft); border-radius: 50%; animation: floatOne 8s ease-in-out infinite; }
.shape-flower { right: 10%; bottom: 17%; width: 88px; height: 88px; background: var(--color-orange); border-radius: 50% 12% 50% 12%; animation: turn 14s linear infinite; }
.shape-squiggle { right: 13%; top: 22%; width: 110px; height: 35px; border-top: 8px dotted var(--color-pink); transform: rotate(13deg); animation: floatTwo 7s ease-in-out infinite; }
.shape-dot { left: 18%; bottom: 18%; width: 26px; height: 26px; border-radius: 50%; background: var(--color-mint-deep); box-shadow: 35px -25px 0 var(--color-yellow), 67px 6px 0 var(--color-lilac); animation: floatOne 6s ease-in-out infinite reverse; }
.portal { position: absolute; z-index: 6; display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--color-ink); background: var(--color-white); color: var(--color-ink); text-align: left; transition: transform .28s var(--ease-pop), background .25s, color .25s, box-shadow .25s; }
.portal:hover { background: var(--color-ink); color: var(--color-white); box-shadow: 9px 9px 0 var(--color-yellow); }
.portal strong { font: 500 clamp(18px, 2vw, 29px)/1 var(--font-display); }
.portal small { font: 400 8px/1.3 var(--font-mono); }
.portal-index { font: 400 7px/1 var(--font-mono); opacity: .65; }
.portal-arrow { font: 300 25px/1 var(--font-mono); }
.portal-up { left: 50%; top: 96px; width: 205px; transform: translateX(-50%) rotate(-2deg); grid-template-columns: auto 1fr; }
.portal-up:hover { transform: translateX(-50%) translateY(-6px) rotate(0); }
.portal-up strong, .portal-up small { grid-column: 2; }
.portal-left { left: clamp(20px, 4vw, 64px); top: 50%; width: 215px; transform: translateY(-50%) rotate(2deg); }
.portal-left:hover { transform: translateY(-50%) translateX(-6px) rotate(0); }
.portal-right { right: clamp(20px, 4vw, 64px); top: 50%; width: 215px; transform: translateY(-50%) rotate(-2deg); grid-template-columns: 1fr auto; }
.portal-right:hover { transform: translateY(-50%) translateX(6px) rotate(0); }
.portal-right .portal-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.portal-down { left: 50%; bottom: 43px; width: 230px; transform: translateX(-50%) rotate(1deg); grid-template-columns: 1fr auto; }
.portal-down:hover { transform: translateX(-50%) translateY(6px) rotate(0); }
.portal-down .portal-arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.home-hint { position: absolute; z-index: 5; left: 24px; bottom: 17px; margin: 0; color: var(--color-ink-soft); font: 400 7px/1 var(--font-mono); letter-spacing: .08em; }

.make-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: 35px; }
.make-heading h2, .now-heading h2, .think-heading h2, .share-heading h2 { margin: 14px 0 0; font: 500 clamp(39px, 4.5vw, 69px)/.98 var(--font-display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.make-heading > p { max-width: 390px; margin: 0 6vw 4px 0; font-size: 12px; line-height: 1.65; }
.build-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 35px; }
.build-object { position: relative; min-width: 0; height: clamp(230px, 35vh, 350px); padding: 17px; overflow: hidden; border: 1px solid var(--color-ink); background: var(--color-white); text-align: left; transition: transform .3s var(--ease-pop), box-shadow .25s, background .25s; }
.build-object:hover, .build-object:focus-visible { z-index: 3; transform: translateY(-10px) rotate(var(--tilt)); box-shadow: 10px 11px 0 var(--color-ink); }
.build-object:nth-child(odd) { --tilt: -1deg; }
.build-object:nth-child(even) { --tilt: 1deg; }
.build-object small { display: block; font: 400 7px/1.3 var(--font-mono); letter-spacing: .08em; }
.build-object strong { display: block; margin-top: 18px; font: 500 clamp(17px, 1.65vw, 25px)/1.05 var(--font-display); overflow-wrap: anywhere; }
.build-object p { margin: 13px 0 0; font-size: 10px; line-height: 1.45; }
.build-object em { position: absolute; left: 17px; bottom: 16px; font: 500 7px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; }
.build-object .object-art { position: absolute; right: -20px; bottom: -20px; width: 125px; height: 125px; border: 22px solid var(--object-color); border-radius: var(--shape-radius); transform: rotate(18deg); transition: transform .5s var(--ease-pop), border-width .5s; }
.build-object:hover .object-art { transform: rotate(72deg) scale(1.25); border-width: 11px; }
.build-object[data-color="blue"] { --object-color: var(--color-blue); --shape-radius: 50%; }
.build-object[data-color="orange"] { --object-color: var(--color-orange); --shape-radius: 50% 8%; }
.build-object[data-color="mint"] { --object-color: var(--color-mint-deep); --shape-radius: 8px; }
.build-object[data-color="lilac"] { --object-color: var(--color-lilac); --shape-radius: 50% 0 50% 0; }
.build-object[data-color="yellow"] { --object-color: var(--color-yellow); --shape-radius: 50%; }
.small-drawer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; width: 100%; margin-top: 11px; padding: 16px 19px; border: 1px dashed var(--color-ink); background: transparent; text-align: left; }
.small-drawer span, .small-drawer i { font: 500 8px/1 var(--font-mono); letter-spacing: .08em; font-style: normal; }
.small-drawer strong { font: 500 11px/1 var(--font-body); }
.small-drawer:hover { background: var(--color-yellow); }

.think-layout { min-height: calc(100svh - 142px); display: grid; grid-template-columns: .9fr 1fr 1.05fr; align-items: center; gap: 4vw; padding-top: 20px; }
.think-heading > p:last-child { max-width: 360px; margin: 28px 0 0; font-size: 12px; line-height: 1.65; }
.thinking-object { position: relative; width: min(32vw, 440px); aspect-ratio: 1; justify-self: center; transition: transform .65s var(--ease-pop), filter .5s; }
.object-ring { position: absolute; border: 1px solid var(--color-ink); border-radius: 50%; transition: transform .7s var(--ease-pop), border-radius .7s, inset .7s; }
.ring-one { inset: 6%; }.ring-two { inset: 25%; border-style: dashed; }
.object-core { position: absolute; inset: 38%; display: grid; place-items: center; border-radius: 50%; background: var(--color-ink); color: var(--color-white); text-align: center; transition: border-radius .55s, transform .55s, background .4s; }
.object-core span { font: 500 8px/1.4 var(--font-display); }
.satellite { position: absolute; width: 16px; height: 16px; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-yellow); transition: transform .6s var(--ease-pop), border-radius .5s, background .5s; }
.s1{left:12%;top:31%}.s2{right:9%;top:24%;background:var(--color-orange)}.s3{left:23%;bottom:9%;background:var(--color-mint)}.s4{right:18%;bottom:14%;background:var(--color-blue)}
.thinking-object[data-mode="representation"] { transform: rotate(-8deg); }.thinking-object[data-mode="representation"] .object-core { border-radius: 3px; transform: rotate(45deg); background: var(--color-blue); }.thinking-object[data-mode="representation"] .object-core span { transform: rotate(-45deg); }
.thinking-object[data-mode="interaction"] .ring-one { transform: scale(.82); border-radius: 15% 50%; }.thinking-object[data-mode="interaction"] .ring-two { transform: scale(1.25) rotate(45deg); }
.thinking-object[data-mode="evidence"] .satellite { transform: scale(1.8); border-radius: 2px; }.thinking-object[data-mode="evidence"] .object-core { background: var(--color-orange); }
.thinking-object[data-mode="adaptation"] .ring-one { transform: rotate(65deg) scaleX(.55); }.thinking-object[data-mode="adaptation"] .ring-two { transform: rotate(-40deg) scaleY(1.45); }.thinking-object[data-mode="adaptation"] .object-core { transform: scale(.7); background: var(--color-mint-deep); }
.idea-stack { border-top: 1px solid var(--color-ink); }
.idea-stack button { display: grid; grid-template-columns: 30px 1fr; gap: 15px; width: 100%; padding: 19px 8px; border: 0; border-bottom: 1px solid var(--color-ink); background: transparent; text-align: left; transition: padding .22s, background .22s; }
.idea-stack button:hover, .idea-stack button:focus-visible { padding-left: 18px; background: var(--color-yellow); }
.idea-stack span { font: 400 8px/1 var(--font-mono); }
.idea-stack strong { font: 500 clamp(12px,1.2vw,17px)/1.3 var(--font-display); }

.now-layout { min-height: calc(100svh - 145px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items: center; padding-top: 20px; }
.now-heading > p:last-child { max-width: 330px; margin: 27px 0 0; color: var(--color-blue-soft); font-size: 12px; line-height: 1.65; }
.thread-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line-light); }
.thread-list button { position: relative; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 17px; width: 100%; padding: 25px 8px; overflow: hidden; border: 0; border-bottom: 1px solid var(--color-line-light); background: transparent; color: var(--color-white); text-align: left; }
.thread-list button::before { content:""; position:absolute; inset:0; background:var(--color-yellow); transform:translateX(-102%); transition:transform .38s var(--ease-room); }
.thread-list button:hover::before { transform: translateX(0); }
.thread-list button > * { position: relative; z-index: 1; }
.thread-list button:hover { color: var(--color-ink); }
.thread-list span, .thread-list i { font: 400 8px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; }
.thread-list strong { font: 500 clamp(19px,2.3vw,34px)/1.02 var(--font-display); }

.share-heading { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 5vw; margin-top: 38px; }
.share-heading .eyebrow { grid-column: 1 / -1; }
.share-heading > p:last-child { max-width: 430px; margin: 0 4vw 4px 0; font-size: 12px; line-height: 1.65; }
.channel-collage { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: repeat(2, minmax(150px, 1fr)); gap: 8px; height: clamp(370px, 54vh, 520px); margin-top: 28px; }
.channel { position: relative; min-width: 0; padding: 20px; overflow: hidden; border: 1px solid var(--color-ink); background: var(--color-white); transition: transform .3s var(--ease-pop), box-shadow .25s; }
a.channel:hover { z-index: 2; transform: translate(-4px,-5px) rotate(-1deg); box-shadow: 8px 8px 0 var(--color-ink); }
.channel small { display: block; font: 500 7px/1 var(--font-mono); letter-spacing: .09em; }
.channel strong { display: block; margin-top: 20px; font: 500 clamp(18px,2vw,31px)/1.05 var(--font-display); overflow-wrap: anywhere; }
.channel em { position: absolute; left: 20px; bottom: 17px; font: 500 7px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; }
.xhs-channel { grid-row: 1 / span 2; background: var(--color-pink); }
.xhs-channel strong { margin-top: 45px; font-size: clamp(31px,3.4vw,52px); }
.channel-number { position: absolute; right: -10px; top: 6px; color: var(--color-white); font: 600 clamp(65px,8vw,120px)/1 var(--font-display); opacity: .55; transform: rotate(7deg); }
.xhs-stickers { position: absolute; right: 20px; bottom: 25px; width: 120px; height: 100px; }
.xhs-stickers i { position: absolute; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid var(--color-ink); background: var(--color-yellow); font: 500 14px/1 var(--font-display); font-style: normal; }
.xhs-stickers i:nth-child(1){left:0;top:25px;transform:rotate(-8deg)}.xhs-stickers i:nth-child(2){left:39px;top:0;background:var(--color-blue);color:var(--color-white);transform:rotate(5deg)}.xhs-stickers i:nth-child(3){right:0;bottom:5px;background:var(--color-mint);transform:rotate(11deg)}
.github-channel { background: var(--color-ink); color: var(--color-white); }
.substack-channel { background: var(--color-orange); }
.podcast-channel { background: var(--color-yellow); }
.linkedin-channel { background: var(--color-blue-soft); }
.atlas-channel { background: var(--color-lilac); }
.waveform { position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 4px; height: 55px; }
.waveform i { width: 4px; height: 20%; background: var(--color-ink); animation: wave 1s ease-in-out infinite alternate; }.waveform i:nth-child(2){animation-delay:.1s;height:70%}.waveform i:nth-child(3){animation-delay:.2s;height:35%}.waveform i:nth-child(4){animation-delay:.3s;height:90%}.waveform i:nth-child(5){animation-delay:.4s;height:50%}.waveform i:nth-child(6){animation-delay:.5s;height:76%}.waveform i:nth-child(7){animation-delay:.6s;height:28%}

.edge-door { position: absolute; z-index: 8; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid currentColor; background: transparent; font: 500 8px/1 var(--font-mono); letter-spacing: .08em; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
.edge-door:hover { background: var(--color-ink); color: var(--color-white); }
.door-right { right: 15px; top: 50%; transform: translateY(-50%) rotate(90deg) translateY(-100%); transform-origin: right top; }
.door-left { left: 15px; top: 50%; transform: translateY(-50%) rotate(-90deg) translateY(-100%); transform-origin: left top; }
.door-down { left: 50%; bottom: 12px; transform: translateX(-50%); }
.door-up { left: 50%; top: 86px; transform: translateX(-50%); }

.mini-map { position: fixed; z-index: 45; right: 24px; bottom: 20px; width: 92px; height: 92px; }
.mini-map button { position: absolute; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-white); color: var(--color-ink); font: 500 7px/1 var(--font-mono); transition: transform .2s, background .2s; }
.mini-map button:hover { transform: scale(1.25); }.mini-map button.is-active { background: var(--color-ink); color: var(--color-white); transform: scale(1.16); }
.mini-map [data-map-room="now"]{left:35px;top:0}.mini-map [data-map-room="make"]{left:0;top:35px}.mini-map [data-map-room="home"]{left:35px;top:35px}.mini-map [data-map-room="think"]{right:0;top:35px}.mini-map [data-map-room="share"]{left:35px;bottom:0}
.map-line { position: absolute; z-index: 1; background: var(--color-ink); }.map-line-v{left:45px;top:10px;width:1px;height:70px}.map-line-h{left:10px;top:45px;width:70px;height:1px}

.detail-layer, .small-layer, .about-layer, .thread-layer { position: fixed; z-index: 100; inset: 0; }
.detail-backdrop, .about-backdrop, .thread-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: var(--color-shadow); backdrop-filter: blur(8px); }
.detail-card { position: absolute; inset: 4.5vw; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border: 1px solid var(--color-ink); background: var(--color-paper); box-shadow: 15px 15px 0 var(--color-ink); animation: detailIn .55s var(--ease-pop) both; }
.detail-close { position: absolute; z-index: 4; right: 20px; top: 17px; padding: 7px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 500 8px/1 var(--font-mono); letter-spacing: .08em; }
.detail-index { position: absolute; z-index: 3; left: 20px; top: 20px; padding: 7px 9px; background: var(--color-white); font: 500 8px/1 var(--font-mono); }
.detail-artifact { position: relative; overflow: hidden; background: var(--detail-color, var(--color-blue)); }
.detail-artifact::before { content:"";position:absolute;inset:10%;border:1px solid var(--color-ink);border-radius:50%;animation:artifactTurn 12s linear infinite }.detail-artifact::after{content:"";position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;border:clamp(25px,5vw,75px) solid var(--color-white);border-radius:var(--detail-radius,50%);transform:translate(-50%,-50%) rotate(18deg);animation:artifactPulse 4s ease-in-out infinite}
.detail-artifact[data-color="orange"]{--detail-color:var(--color-orange);--detail-radius:50% 8%}.detail-artifact[data-color="mint"]{--detail-color:var(--color-mint);--detail-radius:8px}.detail-artifact[data-color="lilac"]{--detail-color:var(--color-lilac);--detail-radius:50% 0 50% 0}.detail-artifact[data-color="yellow"]{--detail-color:var(--color-yellow);--detail-radius:50%}
.detail-copy { align-self: center; padding: clamp(35px,6vw,90px); }
.detail-copy > p:first-child { margin: 0; color: var(--color-blue); font: 500 9px/1.45 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.detail-copy h2 { margin: 26px 0 0; font: 500 clamp(37px,5vw,72px)/1 var(--font-display); letter-spacing: -.055em; overflow-wrap: anywhere; }
.detail-copy > p:nth-of-type(2) { margin: 28px 0 0; color: var(--color-ink-soft); font-size: 14px; line-height: 1.7; }
#detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; } #detail-tags span { padding: 7px 9px; border: 1px solid var(--color-ink); font: 500 7px/1 var(--font-mono); text-transform: uppercase; }
#detail-link { display: flex; justify-content: space-between; margin-top: 38px; padding: 14px 0; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); font: 500 9px/1 var(--font-mono); text-transform: uppercase; }

.small-layer { background: var(--color-orange-soft); animation: slideUp .55s var(--ease-room) both; }
.small-panel { height: 100%; padding: 90px clamp(24px,7vw,110px) 40px; overflow-y: auto; }
.small-panel > button, .about-card > button, .thread-card > button { position: absolute; right: 25px; top: 24px; padding: 6px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: 500 8px/1 var(--font-mono); }
.small-panel > p, .about-card > p { font: 500 8px/1 var(--font-mono); letter-spacing: .1em; }
.small-panel h2, .about-card h2, .thread-card h2 { margin: 22px 0 0; font: 500 clamp(42px,6vw,84px)/.98 var(--font-display); letter-spacing: -.06em; overflow-wrap: anywhere; }
.small-panel ul { max-width: 1000px; margin: 55px 0 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--color-ink); }
.small-panel li { display: grid; grid-template-columns: 60px .8fr 1fr; gap: 25px; padding: 22px 8px; border-bottom: 1px solid var(--color-ink); }.small-panel li span,.small-panel li small{font:400 8px/1.4 var(--font-mono)}.small-panel li strong{font:500 clamp(16px,2vw,27px)/1 var(--font-display)}
.about-card { position: absolute; right: 0; top: 0; bottom: 0; width: min(680px, 88vw); padding: 80px clamp(28px,5vw,70px); overflow-y: auto; background: var(--color-yellow); border-left: 1px solid var(--color-ink); animation: slideLeft .55s var(--ease-room) both; }
.about-body { margin-top: 45px; }.about-body p { font-size: 15px; line-height: 1.75; }
.about-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 45px; padding-top: 24px; border-top: 1px solid var(--color-ink); }.about-path span{font:500 7px/1 var(--font-mono)}
.thread-card { position: absolute; inset: 10vh 12vw; padding: clamp(35px,6vw,90px); overflow-y: auto; border: 1px solid var(--color-ink); background: var(--color-white); box-shadow: 13px 13px 0 var(--color-yellow); animation: detailIn .5s var(--ease-pop) both; }
.thread-card > span { color: var(--color-blue); font: 500 8px/1 var(--font-mono); letter-spacing: .1em; }
.thread-card h2 { max-width: 950px; font-size: clamp(34px,5.2vw,76px); }
.thread-card > p { max-width: 700px; margin-top: 32px; color: var(--color-ink-soft); font-size: 14px; line-height: 1.7; }
#thread-questions { display: flex; gap: 8px; margin-top: 35px; } #thread-questions span { flex: 1; padding: 17px; border: 1px solid var(--color-ink); font: 500 9px/1.45 var(--font-mono); }

@keyframes twinkle { 50% { transform: rotate(180deg) scale(1.4); } }
@keyframes nudgeDiagonal { 50% { transform: translate(-5px,5px); } }
@keyframes floatOne { 50% { transform: translate(12px,-16px) rotate(8deg); } }
@keyframes floatTwo { 50% { transform: translate(-15px,10px) rotate(2deg); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes wave { to { height: 100%; } }
@keyframes detailIn { from { opacity: 0; transform: scale(.88) rotate(-1deg); } }
@keyframes slideUp { from { transform: translateY(100%); } }
@keyframes slideLeft { from { transform: translateX(100%); } }
@keyframes artifactTurn { to { transform: rotate(360deg); } }
@keyframes artifactPulse { 50% { transform: translate(-50%,-50%) rotate(-18deg) scale(.8); } }

@media (max-width: 980px) {
  .build-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .build-object { height: 235px; }.build-object:nth-child(n+4){height:190px}.build-object p{display:none}
  .think-layout { grid-template-columns: .9fr 1.1fr; }.thinking-object{display:none}
  .channel-collage{grid-template-columns:1.2fr 1fr;height:auto}.xhs-channel{grid-row:1 / span 2}.channel{min-height:170px}.atlas-channel{grid-column:2}.linkedin-channel{grid-column:1}.podcast-channel{grid-column:2}
}

@media (max-width: 720px) {
  .chrome { height: 64px; grid-template-columns: 1fr auto; padding: 0 14px; }.room-title{display:none}.top-links{gap:12px}.top-links a{display:none}.brand-face{width:32px;height:32px}.brand-copy small{display:none}
  .room-shell { padding: 82px 16px 84px; }.room-meta{left:16px;top:74px}
  .home-center { top: 43%; width: 88vw; }.home-center h1{font-size:clamp(36px,10.5vw,54px)}.home-sub{font-size:11px}
  .shape-circle{left:-28px;top:15%;transform:scale(.7)}.shape-flower{right:-25px;bottom:18%;transform:scale(.7)}
  .portal { padding: 12px; }.portal strong{font-size:16px}.portal small{font-size:6px}.portal-arrow{font-size:18px}
  .portal-up{top:79px;width:165px}.portal-left{left:10px;top:68%;width:135px}.portal-right{right:10px;top:68%;width:135px}.portal-down{bottom:20px;width:170px}.home-hint{display:none}
  .make-heading,.share-heading { display:block;margin-top:25px}.make-heading h2,.now-heading h2,.think-heading h2,.share-heading h2{font-size:34px}.make-heading>p,.share-heading>p:last-child{margin-top:14px}
  .build-shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:22px}.build-object,.build-object:nth-child(n+4){height:170px;padding:12px}.build-object strong{font-size:14px;margin-top:11px}.build-object p{display:none}.build-object em{left:12px;bottom:11px}.build-object .object-art{width:75px;height:75px;border-width:13px}.small-drawer{gap:10px;padding:13px}.small-drawer strong{font-size:8px}
  .think-layout,.now-layout { display:block;padding-top:45px}.think-heading>p:last-child,.now-heading>p:last-child{margin-top:17px}.idea-stack,.thread-list{margin-top:35px}.idea-stack button{padding:14px 6px}.thread-list button{padding:18px 5px}.thread-list strong{font-size:18px}.thread-list i{display:none}
  .share-heading{padding-top:30px}.channel-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:5px;height:auto;margin-top:20px}.channel{grid-column:auto!important;grid-row:auto!important;min-height:140px;padding:13px}.xhs-channel{grid-column:1 / -1!important;min-height:190px}.xhs-channel strong{font-size:29px;margin-top:22px}.channel strong{font-size:15px;margin-top:15px}.channel em{left:13px;bottom:11px}.channel-number{font-size:70px}.xhs-stickers{right:10px;bottom:10px;transform:scale(.75)}
  .mini-map{right:12px;bottom:10px;transform:scale(.8);transform-origin:right bottom}.edge-door{display:none}
  .detail-card{inset:12px;display:block;overflow-y:auto;box-shadow:7px 7px 0 var(--color-ink)}.detail-artifact{height:34vh;min-height:220px}.detail-copy{padding:28px 22px 38px}.detail-copy h2{font-size:36px}.detail-close{background:var(--color-white);padding:8px}.detail-index{top:14px;left:14px}
  .small-panel{padding:70px 18px 35px}.small-panel h2,.about-card h2,.thread-card h2{font-size:38px}.small-panel ul{margin-top:35px}.small-panel li{grid-template-columns:40px 1fr;padding:17px 4px}.small-panel li small{grid-column:2}
  .thread-card{inset:45px 12px;padding:60px 23px 30px}.thread-card h2{font-size:34px}#thread-questions{display:block}#thread-questions span{display:block;margin-top:6px}
}

@media (max-width: 375px) {
  .top-links button { font-size: 7px; }.home-center h1{font-size:34px}.portal-left,.portal-right{top:70%;width:122px}.portal-down{bottom:15px}
  .build-object,.build-object:nth-child(n+4){height:150px}.build-object small{font-size:6px}.build-object strong{font-size:12px}.small-drawer{margin-bottom:20px}
  .channel{min-height:126px}.xhs-channel{min-height:165px}.channel strong{font-size:13px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}