/* Site-wide visual system. Existing brand palettes and input semantics are retained. */
:root{--premium-shadow:0 22px 65px #15244312}body:not(.dp-home):not(.company-tribute){background:radial-gradient(ellipse at 96% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 42%),#f5f6fb}body:not(.dp-home):not(.company-tribute) header{border-bottom:1px solid color-mix(in srgb,var(--accent) 15%,#e2e6ef);backdrop-filter:blur(10px)}.button,button{transition:transform .18s,box-shadow .18s,background .18s}.button:hover,button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 24px #17213b20}.card,.guide-card{transition:transform .22s,box-shadow .22s,border-color .22s}.card:hover,.guide-card:hover{transform:translateY(-4px);box-shadow:var(--premium-shadow);border-color:color-mix(in srgb,var(--accent) 40%,#dce1ed)}.tool-banner{padding:32px;border-radius:24px;background:linear-gradient(120deg,white,color-mix(in srgb,var(--accent) 11%,white));border:1px solid color-mix(in srgb,var(--accent) 15%,#dce1ed);box-shadow:0 12px 35px #17213b06}.tool-banner .lede{max-width:710px}.tool-banner .studio-art{filter:drop-shadow(0 12px 15px #17213b18)}.tool-shortcuts a{border-radius:30px;padding:10px 16px;background:white;border:1px solid #d8dfec}.tool-page .inputs{border-top:4px solid var(--accent);box-shadow:0 16px 45px #17213b08}.tool-page .results,.hub .results{background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--accent) 45%,#152340),transparent 75%),#111d36;border:1px solid #ffffff16;box-shadow:0 25px 55px #17213b20}.tool-page .result-row strong{font-variant-numeric:tabular-nums}.tool-page .method-card{border-left:4px solid var(--accent)}.hub .hub-hero{border-radius:26px;padding:36px;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 13%,white),white);border:1px solid color-mix(in srgb,var(--accent) 22%,white)}.hub .studio.featured{box-shadow:var(--premium-shadow);border-top:4px solid var(--accent)}.hub .card .tool-card-glyph{background:color-mix(in srgb,var(--accent) 10%,white);color:var(--accent);border-radius:14px;padding:12px}.company:not(.company-tribute) .company-hero{position:relative;isolation:isolate}.company:not(.company-tribute) .company-hero:before{content:'';position:absolute;right:0;top:4%;width:45%;height:75%;border-radius:45%;background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 17%,transparent),transparent 70%);z-index:-1;pointer-events:none}.company:not(.company-tribute) .company-demo{box-shadow:0 25px 65px #111b361a;border:1px solid color-mix(in srgb,var(--accent) 20%,#dce1ed)}.company:not(.company-tribute) .deliverable{border-top:3px solid var(--accent);transition:transform .2s}.company:not(.company-tribute) .deliverable:hover{transform:translateY(-4px)}.company:not(.company-tribute) .service-package-card{box-shadow:0 24px 70px #111b3618;border-top:4px solid var(--accent)}.company:not(.company-tribute) .company-strip{border-top:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}.company:not(.company-tribute) .scope-card{box-shadow:var(--premium-shadow)}.article-page .quick-answer{border-left:5px solid var(--accent);box-shadow:0 15px 45px #17213b0c}.article-page .article-example{border-radius:18px;overflow:hidden;box-shadow:0 12px 35px #17213b08}.article-page .article-tool-cta{background:linear-gradient(130deg,#edf0fc,#e4eddf);border-radius:22px}.resource-hero,.report{border-top:4px solid var(--accent);padding-top:28px}.delivery-sample{border-top:5px solid #354bed;background:#fff;box-shadow:var(--premium-shadow);border-radius:18px}.delivery-sample h1{letter-spacing:-.055em}
@keyframes premium-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes premium-spark{0%{opacity:0;transform:rotate(-35deg) scale(.45)}65%{opacity:1;transform:rotate(24deg) scale(1.07)}100%{opacity:1;transform:rotate(15deg) scale(1)}}
@media(prefers-reduced-motion:no-preference){.dp-intro,.tool-banner,.resource-hero,.article-layout{animation:premium-enter .65s ease-out both}.dp-demo-wrap,.company:not(.company-tribute) .company-hero,.hub-hero{animation:premium-enter .8s .1s ease-out both}.dp-orbit{animation:premium-spark 1.4s .2s ease-out both}.result-art{animation:premium-enter .45s ease-out both}}
@media(max-width:760px){.tool-banner,.hub .hub-hero{padding:22px}.tool-banner{border-radius:18px}.company:not(.company-tribute) .company-hero:before{width:100%;height:50%;top:30%}.tool-shortcuts{flex-wrap:wrap}.delivery-sample{margin:20px 4%;width:auto}.button:hover,button:not(:disabled):hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{*,*:before,*:after{animation:none!important;transition:none!important;box-shadow:none!important}.tool-banner,.hub .hub-hero{background:white}.dp-hero{background:white;color:#17213b}}
/* Classroom: a focused presentation stage, bright controls, clear live outcomes. */
.tool-classroom,.hub-classroom{--accent:#6540b8!important;--pop:#ffe68a!important}.tool-classroom .tool-banner{background:radial-gradient(circle at 90% 20%,#fbe7ae,transparent 35%),linear-gradient(120deg,#eee7fc,#e3f1f2);border-color:#d9cdef}.tool-classroom .tool-banner .eyebrow{color:#614294}.tool-classroom .inputs{border-top-color:#8054c8}.tool-classroom .results,.hub-classroom .results{background:radial-gradient(ellipse at 50% 20%,#443279,transparent 70%),#201c3c;border-color:#726190}.tool-classroom .wheel-stage{padding:12px;border-radius:20px;background:radial-gradient(circle at 50% 36%,#8f7abd22 0 44%,transparent 45%)}.tool-classroom .wheel{filter:drop-shadow(0 12px 14px #0005);max-height:430px}.tool-classroom #winner{background:#fff4d2;color:#352455;border-radius:16px;padding:18px;margin:15px 0 10px;font-size:clamp(25px,4vw,40px);border:1px solid #f5d783}.tool-classroom #spin,.tool-classroom #stage-spin{background:#ffdf80;color:#33254a;box-shadow:0 4px 0 #c6a248}.tool-classroom .fullscreen-controls{justify-content:center}.tool-classroom #remaining{font-size:13px;letter-spacing:.03em}.tool-classroom #option-list{columns:2;text-align:left;padding-left:24px}.tool-classroom #option-list li{padding:5px}.tool-classroom #history{border-top:1px solid #ffffff25;padding-top:15px;font-size:13px}.tool-classroom .result-row{border-radius:10px;background:#ffffff08;padding:15px;margin:8px 0}.hub-classroom .hub-hero{background:linear-gradient(130deg,#eee4fa,#fff2cf)}.dp-tool-return{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:20px 0}.dp-tool-return button{font-size:12px;min-height:40px;border-radius:30px}.dp-tool-return span{font-size:12px;color:#56627b}.dp-saved{max-width:1200px;margin:35px auto 0;padding:25px;background:#edf0e6;border-radius:16px}.dp-saved h2{font-size:27px;margin:8px 0 20px}.dp-saved #dp-saved-links{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.dp-saved a{padding:12px 16px;background:white;border:1px solid #cad2c0;border-radius:10px;font-size:13px;font-weight:700}.dp-saved button{font-size:12px}.dp-saved[hidden]{display:none!important}@media(max-width:760px){.dp-saved{margin:25px 6% 0}.tool-classroom .wheel-stage{padding:0}.tool-classroom .wheel{max-height:350px}}
.dp-next-step{margin:35px 0;padding:28px;background:linear-gradient(115deg,#fff0e6,#f9e6e9);border:1px solid #e4cfc4;border-radius:20px;display:flex;gap:25px;align-items:center;justify-content:space-between;color:#352638}.dp-next-step h2{font-size:26px;margin:5px 0}.dp-next-step p{font-size:13px;max-width:560px}.dp-next-step .eyebrow{font-size:10px;color:#823c45}.dp-next-step .button{flex-shrink:0;background:#803c48;color:white;font-size:12px}@media(max-width:760px){.dp-next-step{flex-direction:column;align-items:flex-start}}
.article-page .article-tool-cta{color:#17213b}.article-page .article-tool-cta p{color:#43516b}.article-page .article-tool-cta .button{background:#253b71;color:white}
/* Classroom studio: sunny paper, tactile wheels, clear projector results. */
body.tool-classroom,body.hub-classroom{background:#fffaf0!important;--pop:#61409a!important}
.tool-classroom .tool-banner,.hub-classroom .hub-hero{background:radial-gradient(circle at 92% 12%,#ffd58d 0,transparent 32%),linear-gradient(115deg,#f4eaff,#fff3ce 62%,#d8f5ed);border:1px solid #eadbc8}
.tool-classroom .results,.hub-classroom .results{background:#fffdf8;color:#302644;border:1px solid #e1d4eb;box-shadow:0 16px 44px #63497812}
.tool-classroom .results .muted,.tool-classroom .results p,.hub-classroom .results .muted{color:#665573}
.tool-classroom .results .secondary,.hub-classroom .results .secondary{background:white;color:#523775;border:1px solid #baa8ce}
.tool-classroom .wheel-stage,.hub-classroom .wheel-stage{padding:8px 14px 18px;background:radial-gradient(ellipse at 50% 43%,#f2e8ff 0 36%,transparent 65%);border-radius:20px}
.wheel-stage-heading{margin:5px auto 20px;text-align:center}.wheel-kicker{font-size:10px;font-weight:800;letter-spacing:.12em;color:#735295}.wheel-stage-heading h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.045em;margin:10px 0;line-height:1.1}.wheel-stage-heading p{font-size:13px;margin:0}
.tool-classroom .wheel,.hub-classroom .wheel{width:100%;max-height:460px;filter:drop-shadow(0 10px 8px #6a4b8c18)}
.tool-classroom #winner,.hub-classroom #winner{background:#fff0b6;color:#3a2b4d;border:2px solid #e8c967;box-shadow:0 4px 0 #e6d395;border-radius:18px;padding:17px;margin:18px 0 12px;font-weight:850}
.tool-classroom #spin,.tool-classroom #stage-spin{background:#654099;color:white;border:1px solid #54327f;box-shadow:0 4px 0 #382051;border-radius:14px;min-height:50px}
.tool-classroom #spin:hover,.tool-classroom #stage-spin:hover{background:#513080}.tool-classroom .inputs{border-top:5px solid #b493df;background:white}.tool-classroom .inputs textarea{background:#fffcf4;border-color:#b8aac8;line-height:1.7}
.tool-classroom #history{border-color:#ded3e7;color:#665573}.tool-classroom #remaining{color:#665573}.tool-classroom .result-row{background:#f3eef9;color:#302644}.tool-classroom .result-row strong,.tool-classroom .timer{color:#61409a}.tool-classroom #tool:fullscreen,.tool-classroom .utility-studio:fullscreen{background:#fffaf0;color:#302644}.tool-classroom #tool:fullscreen .results{box-shadow:none;border:0}.tool-classroom #tool:fullscreen .wheel-stage-heading{margin:0 0 8px}.tool-classroom #tool:fullscreen .wheel-stage-heading p{display:none}
.hub-classroom .card{background:#fffefa;border-radius:22px;border-color:#e4d9cb;border-top:5px solid #b397da}.hub-classroom .card:nth-child(3n+2){border-top-color:#5eaf9e}.hub-classroom .card:nth-child(3n){border-top-color:#dd9d40}.hub-classroom .tool-card-glyph{background:#efe6fa;color:#654099}.hub-classroom .featured{background:#fffcf5;border-top-color:#d5a144}
@media(max-width:760px){.tool-classroom .wheel-stage,.hub-classroom .wheel-stage{padding:0}.wheel-stage-heading{margin-bottom:18px}.tool-classroom .wheel{max-height:380px}.wheel-kicker{font-size:9px;letter-spacing:.06em}}
.skip-link:not(:focus){clip-path:inset(100%);width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap}
.tool-classroom .dice-grid figcaption,.tool-classroom .group-results small{color:#665573}.tool-classroom .group-results section{background:#f5eefb;border:1px solid #ddcdeb}.tool-classroom .group-results section:nth-child(3n+2){background:#e9f7ef}.tool-classroom .group-results section:nth-child(3n){background:#fff3d7}.tool-classroom .group-results h3{color:#523775}.tool-create .wheel-kicker{color:#d7c6f1}
/* Compact, playable classroom landing-page preview; full editor is one click away. */
.hub-classroom .featured .inputs,.hub-classroom .featured .wheel-stage-heading,.hub-classroom .featured .wheel-stage>details,.hub-classroom .featured #history,.hub-classroom .featured #fullscreen,.hub-classroom .featured .results>.actions{display:none}
.hub-classroom .featured .fullscreen-controls{display:flex;justify-content:center}.hub-classroom .featured .wheel{max-height:310px}.hub-classroom .featured .results{padding:12px}.hub-classroom .featured #winner{font-size:29px;padding:13px}.hub-classroom .featured #stage-spin{background:#654099;color:white;box-shadow:0 3px 0 #382051}.hub-classroom .featured .fullscreen-controls button{font-size:12px;padding:10px 12px}.hub-classroom .featured{transform:none}.hub-classroom .hub-hero{align-items:center}
@media(max-width:760px){.premium-service .note{font-size:15px!important;line-height:1.65}.premium-service .artifact-note{font-size:13px!important;line-height:1.6}.premium-service .eyebrow{font-size:12px!important;line-height:1.5}}