/* Presentation only. Project-specific art direction lives beside each index. */
html{background:var(--paper,#f5f1e9);color:var(--ink,#19262e)}
body{color:var(--ink);background:var(--canvas,var(--paper));--muted:var(--quiet);--line:var(--rule);--surface:var(--card);--accent:var(--pop)}
.workbench{max-width:1400px;padding:30px 4.5vw;position:relative;isolation:isolate}
.appbar{position:relative;z-index:1;border-color:var(--rule);font-size:13px;letter-spacing:.015em}
.pill{color:var(--ink);border-color:var(--rule);background:var(--card);box-shadow:3px 3px 0 var(--pop);font-size:10px}
.intro{position:relative;isolation:isolate;max-width:none;min-height:410px;padding:62px 39% 52px 0;margin-bottom:25px}
.intro h1{font-size:clamp(42px,5.6vw,78px);font-weight:800;letter-spacing:-.065em;position:relative;z-index:2;line-height:1.02;overflow-wrap:normal}
.intro>p{position:relative;z-index:2;max-width:660px}.intro .eyebrow{color:var(--ink);font-size:11px;letter-spacing:.2em}
p,.small,small,li,.stat span{color:var(--quiet)}
a{color:var(--link,var(--ink))}
.panel,.preview-grid article{background:var(--card);border-color:var(--rule);color:var(--ink);box-shadow:var(--elevation,0 12px 40px #17222b09)}
.panel{border-radius:var(--radius,18px)}
.case-page .layout>.panel+.panel{margin-top:0}
.layout{grid-template-columns:minmax(240px,.85fr) minmax(0,1.7fr);gap:28px;align-items:start}
.layout>.panel:nth-child(2){margin-top:32px}
.preview-grid{display:flex;flex-wrap:wrap;align-items:start;gap:22px}.preview-grid article{flex:1 1 220px;border-radius:var(--radius,18px)}
.preview-grid article:nth-child(2){margin-top:30px}.preview-grid article:nth-child(3){margin-top:12px}
.preview-grid b,.stat b{color:var(--ink)}
.stat{border-color:var(--rule);background:var(--tint,var(--card));border-radius:var(--radius,18px)}
label,th{color:var(--ink)}
input:not([type=checkbox]),select,textarea{color:var(--ink);background:var(--field,var(--paper));border-color:var(--rule);border-radius:var(--input-radius,8px)}
input[type=checkbox]{accent-color:var(--ink)}
button,.button{background:var(--pop);color:var(--on-pop,var(--ink));border:1px solid var(--button-rule,var(--ink));border-radius:var(--button-radius,24px);box-shadow:var(--button-shadow,3px 4px 0 var(--ink));transition:translate .22s,box-shadow .22s,background .22s}
button:not(:disabled):hover,.button:hover{translate:0 -3px;box-shadow:var(--button-hover,5px 7px 0 var(--ink))}
button:not(:disabled):active{translate:0 1px;box-shadow:none}
button.secondary{background:var(--tint,var(--paper));color:var(--ink)}
.result{background:var(--field,var(--paper));border-color:var(--pop);color:var(--ink);border-radius:0 var(--radius,18px) var(--radius,18px) 0}
.event{border-color:var(--rule);background:var(--tint,var(--paper));border-radius:var(--radius,18px)}
td,th{border-color:var(--rule)}
.case-nav{border-color:var(--rule);gap:14px;align-items:center}
.case-nav a{color:var(--ink);border-color:var(--rule);border-radius:var(--button-radius,24px);background:var(--card);transition:translate .22s}
.case-nav a:nth-child(2){translate:0 -4px}.case-nav a:hover{translate:0 -6px}.case-nav a[aria-current=page]{color:var(--on-pop,var(--ink));background:var(--pop);box-shadow:3px 4px 0 var(--ink)}
.report-list article{background:var(--card);border-color:var(--pop);border-radius:0 var(--radius,18px) var(--radius,18px) 0}
.dependency-map span{background:var(--tint,var(--paper));color:var(--ink);border-color:var(--rule);box-shadow:4px 4px 0 var(--pop)}
.tag{color:var(--ink);background:var(--tint,var(--paper))}
#notice{color:var(--ink);font-weight:650}footer{color:var(--quiet);border-color:var(--rule)}footer button{color:var(--ink);background:transparent;border:0;box-shadow:none}
:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:5px}
.design-art{position:absolute;z-index:0;right:0;top:20px;width:36%;height:340px;pointer-events:none;user-select:none;color:var(--ink)}
.design-art i,.design-art b,.design-art span{position:absolute;display:block;font-style:normal}
.design-art .shape-a{width:190px;height:190px;left:12%;top:25%;background:var(--pop);border-radius:45% 55% 65% 35%;animation:art-drift 13s ease-in-out infinite alternate}
.design-art .shape-b{width:150px;height:150px;right:2%;top:8%;background:var(--art-second,#fda);border-radius:62% 38% 39% 61%;animation:art-drift 17s ease-in-out infinite alternate-reverse}
.design-art .shape-c{width:160px;height:160px;right:5%;bottom:3%;border:1px solid currentColor;border-radius:50%;rotate:-18deg}
.design-art b{left:9%;top:40%;font-size:clamp(36px,4vw,65px);letter-spacing:-.07em;line-height:.9;z-index:2}
.design-art .art-label{left:12%;bottom:12%;font:11px/1.4 Consolas,monospace;letter-spacing:.12em;z-index:2}
.design-art .art-note{right:4%;top:20%;font:12px/1.4 Consolas,monospace;rotate:8deg;z-index:2;background:var(--card);padding:10px;border:1px solid var(--rule)}
@keyframes art-drift{to{translate:10px -14px;rotate:8deg;border-radius:58% 42% 38% 62%}}
@media(max-width:800px){.workbench{padding:22px 20px}.intro{padding:35px 0 20px;min-height:0}.intro h1{font-size:clamp(38px,9vw,64px)}.intro>p{max-width:100%}.design-art{position:relative;width:100%;height:230px;top:auto;right:auto;margin-top:10px;overflow:hidden}.design-art b{font-size:50px}.design-art .shape-a{width:140px;height:140px}.design-art .shape-b{width:125px;height:125px}.design-art .shape-c{height:120px;width:120px}.layout{grid-template-columns:1fr}.layout>.panel:nth-child(2){margin-top:0}.preview-grid article:nth-child(n){margin-top:0}.case-nav{gap:10px}.case-nav a{padding:10px 12px}.case-nav a:nth-child(2){translate:none}.panel{padding:20px}.stats{gap:10px}.appbar{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:hover,.button:hover{translate:none}}

/* Preserve illustration geometry while giving the objects a slow drift. */
@keyframes art-drift{to{translate:10px -14px;rotate:8deg}}
.preview-grid article:first-child{flex-grow:1.35}
.preview-grid article:nth-child(2){flex-grow:.85}
.preview-grid article:nth-child(3){flex-grow:1.05}
.chart text{fill:var(--quiet)}
.chart path{stroke:var(--quiet)}
@media(max-width:800px){.intro h1{overflow-wrap:anywhere}.preview-grid article{flex-basis:100%}}