worlds.css

/* Original graphic treatments: no generated illustrations or raster textures. */
:root{--bg:#f5f5f2;--surface:#fff;--text:#171717;--muted:#555;--accent:#171717;--line:#aaa;--on-accent:#fff;color-scheme:light}
body[data-mode=dark]{--bg:#101010;--surface:#1b1b1b;--text:#f5f5f2;--muted:#bdbdbd;--accent:#fff;--line:#686868;--on-accent:#111;color-scheme:dark}
body{transition:background-color .3s,color .3s}h1{font-size:clamp(48px,6.8vw,94px);font-weight:800;letter-spacing:-.055em;line-height:1.12}h2{font-weight:700}.hero{padding-top:45px}.hero h1{max-width:1100px}.hero-line{margin-top:40px}.intro,.hero-secret span,.job-copy,.project-bottom span span{color:var(--muted)}.primary,.toast{color:var(--on-accent)}.project{--accent:inherit}.project-1,.project-2,.project-3{--accent:var(--text)}.project-visual{background:none}.diagram span{border-color:var(--line);font-size:12px}.project-visual>strong{color:var(--accent)}.project:hover .round-arrow{color:var(--on-accent)}.world-picker{display:flex;gap:24px;align-items:center;padding-top:26px;padding-bottom:26px;border-bottom:1px solid var(--line)}.world-picker>div:first-child{min-width:160px}.world-picker p{font-size:17px;font-weight:700}.world-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:1}.world-options button{border:1px solid var(--line);padding:10px 13px;text-align:left;border-radius:3px;font:12px ui-monospace,monospace;background:var(--surface)}.world-options strong{display:inline;font:600 14px var(--font)}.world-options small{display:block;font:12px var(--font);color:var(--muted);margin-top:4px}.world-options button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}.mode-controls{display:flex;flex-direction:column;gap:6px}.mode-controls button{border:1px solid var(--line);font-size:12px;padding:6px 10px;white-space:nowrap}.secret{border:1px dashed var(--accent);border-radius:6px;background:var(--surface);color:var(--text);padding:10px 15px;font-size:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;box-shadow:3px 3px 0 var(--line);transition:transform .2s,box-shadow .2s}.secret:hover{transform:translate(-2px,-2px);color:var(--text);box-shadow:5px 5px 0 var(--accent)}.hero-secret span{color:var(--text);font-size:14px}.hero-secret{font-size:22px}.toolkit-head{flex-wrap:wrap;gap:14px}.toolkit-head .secret{padding:10px 15px;color:var(--text)}footer{flex-wrap:wrap}footer .secret{font-size:12px}.toolkit>.secret{margin-top:10px}.toast{border:1px solid var(--line)}.small-star{display:inline-block;animation:orbit 18s linear infinite}.hero h1{animation:arrive .65s both}.project:hover .diagram span{animation:hop .6s ease}.project:hover .diagram span:nth-child(2){animation-delay:.12s}.project:hover .diagram span:nth-child(3){animation-delay:.24s}.secret.discovered{border-style:solid}.secret.discovered:after{content:'✓';font-size:16px}.world-picker button:hover{transform:translateY(-2px)}
/* Monochrome: technical panels, a film-title scale, and a moving flight line. */
body[data-world=default] .hero-line{position:relative;overflow:hidden}body[data-world=default] .hero-line:before{content:'';position:absolute;top:0;left:0;width:80px;height:2px;background:var(--accent);animation:flight 8s ease-in-out infinite}body[data-world=default] .project{border-radius:0}body[data-world=default] .project-top{border-bottom:1px solid var(--line)}
/* Zelda: inked storybook cards, botanical green and gilded geometry. */
body[data-world=zelda]{--bg:#f5f0d9;--surface:#fffbed;--text:#203e31;--muted:#496052;--accent:#285c3f;--line:#94a276;--on-accent:#fff;--font:Georgia,'Times New Roman',serif}
body[data-world=zelda][data-mode=dark]{--bg:#142d25;--surface:#1e3b2e;--text:#f5edce;--muted:#c8cdb1;--accent:#e7c369;--line:#728164;--on-accent:#1c3027}
body[data-world=zelda] h1,body[data-world=zelda] h2,body[data-world=zelda] h3{font-family:Georgia,serif;font-weight:500;letter-spacing:-.045em}body[data-world=zelda] .project{border:2px solid var(--text);border-radius:24px 8px 24px 8px;box-shadow:5px 6px 0 var(--line)}body[data-world=zelda] .project:nth-child(2n){border-radius:8px 24px 8px 24px}body[data-world=zelda] .project-visual{background:radial-gradient(circle at 50% 50%,transparent 45%,var(--line) 45.5%,transparent 46.5%)}body[data-world=zelda] .primary{border-radius:30px}body[data-world=zelda] .hero-note{border-left:3px double var(--accent)}body[data-world=zelda] .small-star{animation:sway 4s ease-in-out infinite}
/* Cyberpunk: hard cuts, offset shadows, monospace and controlled scan lines. */
body[data-world=cyberpunk]{--bg:#ece849;--surface:#fffca2;--text:#15152b;--muted:#42425c;--accent:#861544;--line:#67652d;--on-accent:#fff;--font:Consolas,ui-monospace,monospace}
body[data-world=cyberpunk][data-mode=dark]{--bg:#100d20;--surface:#1d1833;--text:#f6f341;--muted:#c9badc;--accent:#6af7ef;--line:#685575;--on-accent:#101320}
body[data-world=cyberpunk] h1,body[data-world=cyberpunk] h2,body[data-world=cyberpunk] h3{font-family:Impact,'Arial Narrow',sans-serif;text-transform:uppercase;font-weight:500;letter-spacing:.015em}body[data-world=cyberpunk] h1{font-size:clamp(48px,6.4vw,89px);text-shadow:3px 2px 0 var(--surface)}body[data-world=cyberpunk] .project{border:2px solid var(--text);border-radius:0;box-shadow:6px 6px 0 var(--accent)}body[data-world=cyberpunk] .project-visual{background:repeating-linear-gradient(0deg,transparent,transparent 7px,color-mix(in srgb,var(--line) 18%,transparent) 8px)}body[data-world=cyberpunk] .primary{border-radius:0;clip-path:polygon(0 0,100% 0,100% 75%,94% 100%,0 100%)}body[data-world=cyberpunk] .diagram span{border-radius:0}body[data-world=cyberpunk] .hero-note{border:1px solid var(--accent);padding:20px}body[data-world=cyberpunk] .small-star{animation:orbit 12s steps(8) infinite}
/* Dark Souls: severe manuscript typography, engraved frames and ember accents. */
body[data-world=souls]{--bg:#dfd9cf;--surface:#eee8dd;--text:#332b27;--muted:#64594d;--accent:#874020;--line:#94836c;--on-accent:#fff;--font:Georgia,'Times New Roman',serif}
body[data-world=souls][data-mode=dark]{--bg:#191716;--surface:#24201e;--text:#e2d4bd;--muted:#b6a68e;--accent:#e1a26b;--line:#78634f;--on-accent:#221a15}
body[data-world=souls] h1,body[data-world=souls] h2,body[data-world=souls] h3{font-family:Georgia,serif;font-weight:400;letter-spacing:.015em}body[data-world=souls] h1{font-variant:small-caps}body[data-world=souls] .project{border:4px double var(--line);border-radius:0;box-shadow:inset 0 0 30px #0000000a}body[data-world=souls] .project-top{font-family:Georgia,serif;letter-spacing:.15em}body[data-world=souls] .project-visual>strong{font-family:Georgia,serif;font-size:80px}body[data-world=souls] .primary{border:3px double var(--accent);background:transparent;color:var(--accent);border-radius:0}body[data-world=souls] .round-arrow{border-radius:0;transform:rotate(45deg)}body[data-world=souls] .hero-note{border-left:3px double var(--line)}body[data-world=souls] .small-star{animation:ember 4s ease-in-out infinite}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation:none!important;transition:none!important}body.motion-paused{scroll-behavior:auto}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes sway{50%{transform:rotate(20deg) translateY(-3px)}}@keyframes ember{50%{opacity:.55;filter:drop-shadow(0 0 6px var(--accent))}}@keyframes flight{50%{left:calc(100% - 80px)}}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@keyframes hop{50%{transform:translateY(-7px)}}
@media(max-width:1100px){.world-picker{flex-wrap:wrap}.world-options{order:3;flex-basis:100%}.mode-controls{margin-left:auto;flex-direction:row}.hero-note{max-width:360px}.diagram{flex-wrap:wrap}}
@media(max-width:700px){.world-picker{gap:16px}.world-options{grid-template-columns:1fr 1fr}.world-picker>div:first-child{min-width:0}.world-picker p{font-size:16px}.mode-controls{gap:5px}.mode-controls button{font-size:11px}.hero{padding-top:30px}.hero h1{font-size:clamp(42px,9vw,60px)}.secret{max-width:100%}.project-visual{padding:16px}.diagram span{font-size:11px}.hero-note{max-width:100%}body[data-world=cyberpunk] h1{font-size:46px}.world-picker .eyebrow{font-size:9px}.desktop{display:none}footer{gap:22px}.toolkit-head .secret{font-size:12px}h2{overflow-wrap:break-word}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}