.playground-intro{padding-bottom:54px}
.playground-intro h1{font-size:clamp(60px,8vw,112px)}
.playground-intro-aside{max-width:600px;margin-top:30px;font-size:14px;line-height:1.8;color:var(--muted)}
.playground-index{padding-top:12px}
.playground-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.playground-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #fff;border-radius:30px;background:#f7f7fa;box-shadow:0 12px 32px #30374608;transition:transform .2s,box-shadow .2s}
.playground-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px #30374612}
.playground-card-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:12px;min-height:205px;padding:30px;background:#dfe2ec}
.playground-card-art span{display:flex;align-items:center;justify-content:center;min-height:68px;padding:12px;border:1px solid #bfc5d4;border-radius:14px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;color:#4a5369}
.card-game-art{background:#d7dbe5}.quiz-art{background:#e8eaf1}.website-art{background:#e3e5ec}.fiction-art{background:#dce0e9}
.playground-card-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:35px}
.playground-card-copy .eyebrow{margin-bottom:16px}.playground-card-copy h2{font-size:clamp(30px,3vw,42px);line-height:1.2}
.playground-card-copy>p:not(.eyebrow){margin:19px 0 30px;font-size:15px;line-height:1.75;color:var(--muted)}
.playground-card-copy .text-link{margin-top:auto}
.playground-hero{margin-bottom:0}.playground-hero-note{max-width:680px;margin-top:30px;font-size:14px;line-height:1.75;color:var(--muted)}
.playground-visual{padding-top:55px;padding-bottom:75px}
.system-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.system-strip>div{min-width:0;padding:28px 22px 30px;border-left:1px solid var(--line)}
.system-strip>div:first-child{border-left:0;padding-left:0}
.system-strip span{display:block;margin-bottom:36px;font-size:11px;color:var(--muted)}
.system-strip strong{font-size:clamp(18px,2vw,28px);font-weight:600}
.system-strip p{margin-top:12px;font-size:14px;line-height:1.65;color:var(--muted)}
.visual-caption{margin-top:17px;font-size:12px;line-height:1.7;color:var(--muted)}
.system-map{padding:34px;border:1px solid var(--line);border-radius:26px;background:#f7f7fa}
.map-flow{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:8px 0 14px}
.map-node{display:flex;align-items:center;justify-content:center;min-height:70px;min-width:128px;padding:14px 18px;border:1px solid #cbd0db;border-radius:14px;background:#fdfdff;color:var(--ink);font-size:13px;font-weight:600;line-height:1.4;text-align:center}
.map-flow>.map-node:not(:last-child),.map-flow>.map-branch{position:relative;margin-right:32px}
.map-flow>.map-node:not(:last-child)::after,.map-flow>.map-branch::after{content:"";position:absolute;top:50%;right:-32px;width:32px;border-top:1px solid #aeb5c4}
.map-flow>.map-node:not(:last-child)::before,.map-flow>.map-branch::before{content:"";position:absolute;top:calc(50% - 4px);right:-32px;width:8px;height:8px;border-top:1px solid #aeb5c4;border-right:1px solid #aeb5c4;transform:rotate(45deg);z-index:1}
.map-branch{display:grid;gap:9px;min-width:145px}
.map-branch .map-node{min-height:49px;min-width:145px}
.map-note{margin:16px 0 0;padding-top:17px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.75}
.site-map{text-align:center}.map-root{width:max-content;min-width:150px;margin:0 auto 54px;position:relative}.map-root::after{content:"";position:absolute;top:100%;left:50%;height:54px;border-left:1px solid #aeb5c4}
.map-columns{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;position:relative}.map-columns::before{content:"";position:absolute;top:-27px;left:10%;right:10%;border-top:1px solid #aeb5c4}.map-columns>div{position:relative}.map-columns>div::before{content:"";position:absolute;top:-27px;left:50%;height:27px;border-left:1px solid #aeb5c4}.map-columns .map-node{min-width:0}.map-columns p{margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.fiction-map .map-inputs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:32px;position:relative}.fiction-map .map-inputs::after{content:"";position:absolute;top:100%;left:50%;height:32px;border-left:1px solid #aeb5c4}.fiction-map .map-inputs .map-node{min-width:0}.fiction-map .map-flow{justify-content:center;overflow:visible}.fiction-map .map-outcomes{display:flex;justify-content:center;gap:14px;margin-top:23px}.map-outcomes>div{text-align:center}.map-outcomes span{display:block;margin-bottom:8px;color:var(--muted);font-size:11px;letter-spacing:.09em;text-transform:uppercase}.map-outcomes .map-node{min-width:190px}
.playground-detail-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;border-bottom:1px solid var(--line)}
.playground-detail-grid h2{font-size:clamp(30px,3.2vw,46px)}
.playground-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.playground-mini-grid article{padding-top:23px;border-top:1px solid var(--line)}
.playground-mini-grid h3{font-size:21px}.playground-mini-grid p{margin-top:13px;font-size:15px;line-height:1.75;color:var(--muted)}
.playground-links{display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:30px}
.playground-fiction-list article{display:grid;grid-template-columns:.75fr 1.25fr;gap:7%;padding:34px 0;border-top:1px solid var(--line)}
.playground-fiction-list article:last-child{border-bottom:1px solid var(--line)}
.playground-fiction-list h3{font-size:clamp(24px,2.5vw,34px)}
.playground-fiction-list article p:not(.eyebrow){font-size:16px;line-height:1.75;color:var(--muted);max-width:760px}
.playground-fiction-list article .text-link{margin-top:20px}
@media(max-width:900px){.playground-card-art{min-height:170px;padding:18px;gap:8px}.playground-card-art span{font-size:9px;padding:6px}.playground-detail-grid{grid-template-columns:1fr;gap:35px}}
@media(max-width:700px){.playground-grid{grid-template-columns:1fr}.system-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.system-strip>div:nth-child(3){border-left:0;border-top:1px solid var(--line);padding-left:0}.system-strip>div:nth-child(4){border-top:1px solid var(--line)}.playground-fiction-list article{grid-template-columns:1fr;gap:15px}}
@media(max-width:600px){.playground-intro h1{font-size:58px}.playground-index{padding-top:0}.playground-card-art{min-height:150px}.playground-card-copy{padding:28px}.playground-card-copy h2{font-size:33px}.playground-card-copy>p:not(.eyebrow){font-size:15px}.playground-visual{padding-top:36px}.system-strip>div{padding:20px 12px}.system-strip>div:first-child,.system-strip>div:nth-child(3){padding-left:0}.system-strip span{margin-bottom:22px}.system-strip strong{font-size:20px}.system-strip p{font-size:13px}.playground-mini-grid{grid-template-columns:1fr;gap:20px}.playground-fiction-list article p:not(.eyebrow){font-size:15px}}
@media(max-width:1100px){.map-flow{flex-direction:column;align-items:center;overflow:visible}.map-flow>.map-node:not(:last-child),.map-flow>.map-branch{margin:0 0 30px}.map-flow>.map-node:not(:last-child)::after,.map-flow>.map-branch::after{top:auto;right:50%;bottom:-30px;width:0;height:30px;border-top:0;border-left:1px solid #aeb5c4}.map-flow>.map-node:not(:last-child)::before,.map-flow>.map-branch::before{top:auto;right:calc(50% - 4px);bottom:-30px;transform:rotate(135deg)}.map-flow>.map-node,.map-branch,.map-branch .map-node{width:min(100%,320px)}}
@media(max-width:700px){.system-map{padding:22px}.map-columns{grid-template-columns:1fr;gap:20px}.map-root{margin-bottom:30px}.map-root::after{height:30px}.map-columns::before,.map-columns>div::before{display:none}.map-columns .map-node{width:100%}.fiction-map .map-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fiction-map .map-inputs .map-node{padding:9px;font-size:11px}.fiction-map .map-outcomes{flex-direction:column;align-items:center}.map-outcomes .map-node{width:min(100%,320px)}.fiction-map .map-flow{overflow:visible}}

/* An editorial, image-like treatment for the four working diagrams. */
.playground-visual{width:calc(100% - 48px);max-width:1552px;margin:24px auto 0;padding:clamp(32px,5vw,76px);border-radius:34px;overflow:hidden;color:#fff;background:radial-gradient(ellipse at 74% 34%,#839ab574 0%,transparent 40%),radial-gradient(ellipse at 18% 72%,#374e6b8a 0%,transparent 50%),linear-gradient(145deg,#506987,#5e7899 65%,#4c6685)}
.playground-visual>.eyebrow{color:#f6f8fbba;font-size:12px;letter-spacing:.16em;margin-bottom:24px}
.playground-visual .system-map{padding:0;border:0;border-radius:0;background:none}
.playground-visual .map-headline{margin:0 0 58px;padding:clamp(30px,5vw,70px) 24px;border:1px dotted #ffffffba;border-radius:clamp(34px,6vw,80px);font-family:Georgia,Times,serif;font-size:clamp(31px,4.7vw,68px);font-weight:400;letter-spacing:-.035em;line-height:1.14;text-align:center;color:#fff}
.playground-visual .map-headline em{font-weight:400}
.playground-visual .map-flow{display:flex;flex-direction:column;align-items:center;gap:0;overflow:visible;padding:0 0 8px}
.playground-visual .map-node{min-width:min(100%,250px);min-height:60px;padding:16px 24px;border:1px solid #ffffff91;border-radius:999px;background:#ffffff1b;color:#fff;box-shadow:inset 0 1px #ffffff16;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:15px;font-weight:500;line-height:1.4}
.playground-visual .map-flow>.map-node:not(:last-child),.playground-visual .map-flow>.map-branch{position:relative;margin:0 0 38px}
.playground-visual .map-flow>.map-node:not(:last-child)::after,.playground-visual .map-flow>.map-branch::after{content:"";position:absolute;top:100%;left:50%;right:auto;bottom:auto;width:0;height:38px;border:0;border-left:1px solid #ffffff9c}
.playground-visual .map-flow>.map-node:not(:last-child)::before,.playground-visual .map-flow>.map-branch::before{content:"";position:absolute;top:calc(100% + 31px);left:calc(50% - 4px);right:auto;bottom:auto;width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none;z-index:1}
.playground-visual .map-branch{width:min(100%,310px);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.playground-visual .map-branch .map-node{min-width:0;width:100%;min-height:74px;font-size:13px}
.playground-visual .visual-caption{margin-top:50px;padding:24px 28px;border:1px dotted #ffffffa8;border-radius:30px;background:#ffffff0d;color:#f6f8fb;font-size:14px;line-height:1.75}
.playground-visual .map-note{margin:33px auto 0;padding:20px 25px;max-width:550px;border:1px solid #ffffff57;border-radius:22px;color:#fff;font-size:14px;line-height:1.75;text-align:center;background:#ffffff12}
.playground-visual .map-root{margin-bottom:55px}
.playground-visual .map-root::after,.playground-visual .map-columns::before,.playground-visual .map-columns>div::before,.playground-visual .fiction-map .map-inputs::after{border-color:#ffffff9c}
.playground-visual .map-columns p{color:#f6f8fbe0;font-size:13px}
.playground-visual .fiction-map .map-inputs{gap:12px;margin-bottom:38px}
.playground-visual .fiction-map .map-inputs .map-node{min-width:0}
.playground-visual .map-outcomes span{color:#f6f8fbc7;font-size:12px}
@media(max-width:700px){.playground-visual{width:calc(100% - 24px);padding:28px 22px 36px;border-radius:26px}.playground-visual .map-headline{margin-bottom:42px;padding:36px 18px;font-size:clamp(29px,8vw,42px);border-radius:36px}.playground-visual .map-node{font-size:14px;min-width:min(100%,240px)}.playground-visual .map-columns{gap:20px}.playground-visual .map-root{margin-bottom:30px}.playground-visual .map-branch{gap:8px}.playground-visual .map-branch .map-node{font-size:12px;padding:12px}.playground-visual .fiction-map .map-inputs .map-node{font-size:12px;min-height:64px}.playground-visual .visual-caption{margin-top:38px;padding:20px;font-size:13px}}

.quiz-prototype{padding-top:32px}.quiz-shell{position:relative;overflow:hidden;width:min(100%,1080px);min-height:610px;margin:auto;padding:clamp(34px,6vw,78px);border-radius:34px;color:#fff;background:radial-gradient(circle at 18% 16%,#91a3bd70,transparent 34%),radial-gradient(circle at 82% 78%,#556f9675,transparent 38%),linear-gradient(145deg,#506987,#273d59);box-shadow:0 24px 70px #30374620}.quiz-shell:before{content:"";position:absolute;inset:18px;border:1px dotted #ffffff8c;border-radius:25px;pointer-events:none}.quiz-screen{position:relative;z-index:1;max-width:820px;margin:auto}.quiz-screen[hidden]{display:none}.quiz-start{display:flex;min-height:455px;flex-direction:column;align-items:flex-start;justify-content:center}.quiz-start .eyebrow,.quiz-result .eyebrow{color:#ffffffc7}.quiz-start h2,.quiz-result h2{font-family:Georgia,Times,serif;font-size:clamp(40px,5.3vw,74px);font-weight:400;line-height:1.12;letter-spacing:-.04em}.quiz-start>p:not(.eyebrow),.quiz-result>p{max-width:670px;margin-top:24px;font-size:16px;line-height:1.8;color:#f5f7fadd}.quiz-primary{margin-top:32px;border:0;cursor:pointer}.quiz-progress-row{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin-bottom:52px}.quiz-progress-row p{font-size:12px;color:#ffffffce}.quiz-progress{height:4px;overflow:hidden;border-radius:999px;background:#ffffff33}.quiz-progress span{display:block;width:20%;height:100%;border-radius:inherit;background:#fff;transition:width .25s ease}.quiz-screen[data-quiz-question] h2{max-width:770px;margin-bottom:36px;font-size:clamp(31px,4.2vw,56px);line-height:1.16;color:#fff}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quiz-option{display:grid;grid-template-columns:35px 1fr;gap:12px;align-items:start;min-height:98px;padding:22px;border:1px solid #ffffff66;border-radius:18px;background:#ffffff10;color:#fff;font:500 15px/1.55 Manrope,Arial,sans-serif;text-align:left;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}.quiz-option:hover,.quiz-option:focus-visible,.quiz-option.is-selected{background:#ffffff25;border-color:#fff;transform:translateY(-2px)}.quiz-option span{font-size:10px;letter-spacing:.08em;color:#ffffffa8}.quiz-back,.quiz-restart{margin-top:26px;padding:8px 0;border:0;border-bottom:1px solid currentColor;background:none;color:#ffffffc9;font:500 12px Manrope,Arial,sans-serif;cursor:pointer}.quiz-result{display:flex;min-height:455px;flex-direction:column;justify-content:center}.quiz-result-line{font-family:Georgia,Times,serif;font-size:clamp(21px,2.6vw,34px)!important;line-height:1.45!important;color:#fff!important}.quiz-result-actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px}.quiz-copy-status{min-height:24px;font-size:12px!important;color:#ffffffc7!important}.quiz-shell[data-result=clarifier]{background:radial-gradient(circle at 20% 20%,#859bb978,transparent 38%),linear-gradient(145deg,#566f90,#2e4059)}.quiz-shell[data-result=pattern]{background:radial-gradient(circle at 80% 18%,#6e93a873,transparent 38%),linear-gradient(145deg,#3f6975,#263d4b)}.quiz-shell[data-result=world]{background:radial-gradient(circle at 78% 76%,#94789478,transparent 38%),linear-gradient(145deg,#66546e,#342e47)}.quiz-shell[data-result=connector]{background:radial-gradient(circle at 22% 75%,#9a8b7378,transparent 38%),linear-gradient(145deg,#6b6253,#3d3b3a)}
@media(max-width:700px){.quiz-prototype{padding-left:12px;padding-right:12px}.quiz-shell{min-height:650px;padding:58px 30px;border-radius:26px}.quiz-shell:before{inset:10px;border-radius:20px}.quiz-options{grid-template-columns:1fr}.quiz-option{min-height:82px}.quiz-progress-row{grid-template-columns:1fr;gap:12px;margin-bottom:36px}.quiz-start h2,.quiz-result h2{font-size:43px}.quiz-start,.quiz-result{min-height:520px}}