/* R8 — quieter, page-specific atmospheres. No form or production behavior changes. */

/* One sculptural controller replaces the crowded arcade world. */
.playable-production.launch-studio:before {
 background:linear-gradient(180deg,#13131316,#13131326),url('revision8-playable-sculpture.png') center/cover no-repeat;
 opacity:.69;mask-image:none;
}
.playable-production.launch-studio:after {
 background:linear-gradient(180deg,#13131355 0%,transparent 30%,transparent 80%,#1313132e 100%);
}

/* Prototype is its own quiet paper-and-block workbench. Controls belong to the route. */
.prototype-request {
 position:relative;isolation:isolate;background:#131313;
 min-height:calc(100dvh - var(--app-topbar-height,72px));
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 width:100%;max-width:none;margin:0;padding:35px clamp(20px,3vw,48px) 30px;
}
.prototype-request:before {
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(180deg,#13131358,transparent 45%,#13131318),url('revision8-prototype-blockout.png') center/cover no-repeat;
 opacity:.55;
}
.prototype-request:after {
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,transparent,#13131318 45%,#13131355);
}
.prototype-heading {width:100%;max-width:880px;text-align:center;margin:0 auto 29px}
.prototype-heading .eyebrow,.prototype-heading .prototype-kicker {font-size:11px;font-weight:600;letter-spacing:.15em;color:#aaa;text-transform:uppercase}
.prototype-heading h1 {font:800 clamp(45px,4.4vw,70px)/1 var(--font-display,'Bricolage Grotesque',sans-serif);letter-spacing:-.055em;color:#f0f0ec;margin:14px 0 17px}
.prototype-heading h1 em,.prototype-heading h1>span {font-style:normal;color:var(--accent,#b4ff2c)}
.prototype-heading>p {max-width:575px;margin:0 auto;color:#b8b8b2;font-size:15px;line-height:1.65}
.prototype-composer {width:min(760px,100%);min-width:0;margin:0;padding:24px;background:#232323ed;border:1px solid #ffffff33;border-radius:22px;box-shadow:0 16px 42px #0003;backdrop-filter:blur(12px)}
.prototype-composer:focus-within {border-color:#b4ff2c6e}
.prototype-prompt {display:block;width:100%;color:#c5c5bf;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.prototype-prompt textarea,.prototype-composer #prototypePrompt {display:block;width:100%;height:176px;min-height:176px;max-height:176px;resize:none;overflow:auto;overscroll-behavior:contain;margin-top:12px;padding:16px 17px;border:1px solid #ffffff24;border-radius:13px;background:#191919b3;color:#ecece8;font:400 16px/1.65 var(--font-body,'DM Sans',sans-serif);letter-spacing:0;text-transform:none;caret-color:var(--accent,#b4ff2c);scrollbar-width:thin;scrollbar-color:#5c5c5c #222}
.prototype-prompt textarea::placeholder,.prototype-composer #prototypePrompt::placeholder {color:#91918c;opacity:1}
.prototype-prompt textarea:focus,.prototype-composer #prototypePrompt:focus {outline:none;border-color:#b4ff2c7d;box-shadow:none;background:#1d1d1dc9}
.prototype-examples {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:15px 0 0}
.prototype-examples>span {font-size:11px;color:#8f8f8a;margin-right:3px}
.prototype-examples button {font:500 12px/1.3 var(--font-body,'DM Sans',sans-serif);color:#bababa;background:#2e2e2e;border:1px solid #ffffff23;border-radius:18px;padding:8px 11px;transition:border-color .15s,background .15s}
.prototype-examples button:hover {color:#eee;background:#363636;border-color:#b4ff2c66}
.prototype-submitbar {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:20px;border-top:1px solid #ffffff20}
.prototype-cost {display:flex;flex-direction:column;gap:6px;color:#aaa;font-size:11px}
.prototype-cost>span {font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#9e9e96}
.prototype-cost strong,.prototype-cost b {font:750 32px/1 var(--font-display,'Bricolage Grotesque',sans-serif);letter-spacing:-.045em;color:#ecece7}
.prototype-cost strong span,.prototype-cost strong small,.prototype-cost b span {font:400 12px var(--font-body,'DM Sans',sans-serif);letter-spacing:0;color:#adada5;margin-left:5px}
.prototype-cost>small {font-size:11px;color:#a5a59b}
.prototype-submitbar>button {display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:51px;min-width:218px;margin:0;padding:13px 21px;border:1px solid var(--accent,#b4ff2c);border-radius:12px;background:var(--accent,#b4ff2c);color:#172007;font:700 15px/1.4 var(--font-body,'DM Sans',sans-serif);box-shadow:none}
.prototype-submitbar>button:hover:not(:disabled) {background:#c6ff61;border-color:#c6ff61}
.prototype-submitbar>button:disabled {opacity:.5;cursor:not-allowed}
.prototype-composer .form-status {font-size:13px;line-height:1.6;margin:14px 0 0;color:#b8b8ac;overflow-wrap:anywhere}
.prototype-composer .form-status:empty {display:none}
.prototype-process {margin:17px 0 0;text-align:center;font-size:11px;line-height:1.6;color:#96968f}
.prototype-footnote {max-width:660px;margin:19px auto 0;text-align:center;font-size:12px;line-height:1.65;color:#a3a39b}

/* Ambient drawings are deliberately behind content and never intercept controls. */
.library-page,.assets-page,.credits-page,.account-settings {
 position:relative;isolation:isolate;background:#131313;
}
.assets-page,.credits-page,.account-settings {
 min-height:calc(100dvh - var(--app-topbar-height,72px));
 overflow-x:clip;
}
.library-page:before,.library-page:after,
.assets-page:before,.assets-page:after,
.credits-page:before,.credits-page:after,
.account-settings:before,.account-settings:after {
 content:'';position:absolute;pointer-events:none;z-index:-1;
}

/* Library: a quiet silver film sheet and a stack of translucent frames. */
.library-page:before {
 inset:0;
 background:repeating-linear-gradient(117deg,transparent 0 63px,#ffffff04 64px 65px,transparent 66px 126px),linear-gradient(105deg,transparent 43%,#ffffff02 59%,transparent 82%);
 mask-image:linear-gradient(90deg,transparent 12%,#000 65%);
}
.library-page:after {
 top:42px;right:7%;width:clamp(160px,29vw,440px);height:clamp(100px,17vw,244px);
 border:1px solid #e1e1e126;border-radius:22px;
 background:linear-gradient(135deg,#ffffff06,transparent 62%);
 box-shadow:-22px 19px 0 -1px #131313,-22px 19px 0 0 #d9d9d915,-44px 38px 0 -1px #131313,-44px 38px 0 0 #d9d9d90c;
 transform:rotate(-11deg);opacity:.78;
}
.library-page>.studio-heading:before,.library-page>.studio-heading:after {content:none}

/* Assets: reference sheets over a subtle drafting grid. */
.assets-page:before {
 inset:0;
 background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);
 background-size:78px 78px;
 mask-image:radial-gradient(ellipse at 88% 12%,#000 5%,transparent 66%);
}
.assets-page:after {
 top:65px;right:8%;width:clamp(150px,26vw,380px);height:clamp(125px,20vw,285px);
 border:1px solid #d7d7d72d;border-radius:24px;
 background:linear-gradient(145deg,#dadada09,transparent 60%);
 box-shadow:-27px 24px 0 -1px #171717,-27px 24px 0 0 #ffffff13,-54px 48px 0 -1px #151515,-54px 48px 0 0 #ffffff08;
 transform:rotate(15deg);opacity:.7;
}
.assets-page>.studio-heading:before,.assets-page>.studio-heading:after {content:none}

/* Credits: engraved silver rings, with no green light cast on the page. */
.credits-page:before {
 inset:0;
 background:linear-gradient(130deg,transparent 55%,#ffffff03 67%,transparent 83%);
}
.credits-page:after {
 top:26px;right:4%;width:clamp(210px,37vw,550px);aspect-ratio:1;
 border:1px solid #ffffff0d;border-radius:50%;
 background:repeating-radial-gradient(circle,transparent 0 23px,#e5e5e51c 24px 25px,transparent 26px 42px);
 mask-image:linear-gradient(130deg,#000 15%,#0008 50%,transparent 87%);
 transform:rotateX(34deg) rotateZ(-21deg);opacity:.66;
}
.credits-overview .balance-card:after {border-color:#ffffff33;opacity:.48}

/* Settings: an offset precision dial and a softly outlined calibration plate. */
.account-settings:before {
 inset:0;
 background:repeating-linear-gradient(135deg,transparent 0 109px,#ffffff04 110px 111px,transparent 112px 219px);
 mask-image:radial-gradient(ellipse at 91% 9%,#000 5%,transparent 65%);
}
.account-settings:after {
 top:36px;right:8%;width:clamp(180px,30vw,430px);height:clamp(92px,14vw,195px);
 border:1px solid #ffffff25;border-radius:100px;
 background:radial-gradient(circle at 24% 50%,transparent 0 24px,#e5e5e519 25px 26px,transparent 27px 36px,#e5e5e509 37px 38px,transparent 39px),linear-gradient(135deg,#ffffff06,transparent 65%);
 box-shadow:0 14px 0 -1px #131313,0 14px 0 0 #ffffff09;
 transform:rotate(-23deg);opacity:.8;
}
.account-settings>.view-head:after {content:none}

/* Keep decorative contrast low on tablets; all content remains naturally scrollable. */
@media(max-width:1100px) {
 .playable-production.launch-studio:before {background-size:cover;background-position:68% center;opacity:.57}
 .prototype-request:before {background-position:35% center;opacity:.43}
 .library-page:after,.assets-page:after,.credits-page:after,.account-settings:after {opacity:.5}
}
@media(max-width:700px) {
 .playable-production.launch-studio:before {background-size:auto 100%;background-position:71% center;opacity:.35}
 .playable-production.launch-studio:after {background:linear-gradient(180deg,#13131344,transparent 35%,#13131322)}
 .prototype-request:before {background-size:auto 100%;background-position:22% center;opacity:.3}
 .prototype-request:after {background:linear-gradient(180deg,#13131333,transparent 65%)}
 .prototype-request {padding:28px 17px;justify-content:flex-start}
 .prototype-heading {margin-bottom:25px}
 .prototype-heading h1 {font-size:clamp(41px,10vw,54px);line-height:1.04;margin:15px 0}
 .prototype-heading>p {font-size:14px;line-height:1.65}
 .prototype-heading .eyebrow,.prototype-heading .prototype-kicker {font-size:10px}
 .prototype-composer {padding:18px;border-radius:19px}
 .prototype-prompt textarea,.prototype-composer #prototypePrompt {height:190px;min-height:190px;max-height:190px;padding:14px;font-size:16px}
 .prototype-examples {gap:7px;margin-top:13px}
 .prototype-examples button {padding:8px 10px;font-size:11px}
 .prototype-submitbar {flex-direction:column;align-items:stretch;gap:18px;margin-top:19px;padding-top:19px}
 .prototype-cost {text-align:center;align-items:center;gap:8px}
 .prototype-cost strong,.prototype-cost b {font-size:34px}
 .prototype-submitbar>button {width:100%;min-width:0;min-height:52px}
 .prototype-process {font-size:11px;line-height:1.7}
 .prototype-footnote {font-size:11px;margin-top:17px}
 .library-page:after {top:47px;right:8%;width:160px;height:103px;border-radius:16px;opacity:.35;box-shadow:-13px 12px 0 -1px #131313,-13px 12px 0 0 #ffffff12,-26px 24px 0 -1px #131313,-26px 24px 0 0 #ffffff08}
 .assets-page:after {top:44px;right:9%;width:138px;height:108px;border-radius:17px;opacity:.4;box-shadow:-16px 14px 0 -1px #151515,-16px 14px 0 0 #ffffff12,-32px 28px 0 -1px #131313,-32px 28px 0 0 #ffffff08}
 .credits-page:after {top:40px;right:6%;width:210px;opacity:.4}
 .account-settings:after {top:42px;right:5%;width:160px;height:85px;opacity:.42}
 .library-page>.studio-heading p,.assets-page>.studio-heading p {max-width:100%}
}
@media(min-width:701px) and (max-height:780px) {
 .prototype-request {padding-block:22px}
 .prototype-heading {margin-bottom:21px}
 .prototype-heading h1 {font-size:47px;margin:12px 0 14px}
 .prototype-heading>p {font-size:14px}
 .prototype-composer {padding:20px}
 .prototype-prompt textarea,.prototype-composer #prototypePrompt {height:130px;min-height:130px;max-height:130px}
 .prototype-submitbar {margin-top:17px;padding-top:17px}
}
@media(prefers-reduced-motion:reduce) {.prototype-examples button {transition:none}}

/* The extra Prototype link fits beside the same complete navigation at laptop heights. */
@media(min-height:801px) and (max-height:960px) {
 .sidebar-inspiration {padding:39px 12px 12px}
 .sidebar-inspiration strong {font-size:19px;line-height:1.05;max-width:128px}
 .sidebar-inspiration>span {font-size:11px;line-height:1.45;margin:7px 0}
 .sidebar-inspiration>b {font-size:11px;line-height:1.4;padding:7px 10px}
 .sidebar-inspiration:before {width:44px;height:44px;top:4px;right:12px;z-index:-1}
 .sidebar-inspiration:after {width:69px;height:17px;top:16px;right:-3px;z-index:-1}
}