/* Development case: four accessible thin arcs; all photo treatment is scoped here. */
#dev .dev{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,3vw,3rem);row-gap:1.25rem;align-items:start;justify-content:normal}
#dev .devframe{grid-column:1;grid-row:1/3;width:100%;height:auto;max-height:none;aspect-ratio:4/3;border:0;border-radius:8px;background:var(--paper);box-shadow:0 .5rem 1.75rem #14141412;cursor:grab;touch-action:pan-y}
#dev .devframe:active{cursor:grabbing}
#dev .devframe img{padding:0;background:transparent;object-fit:contain;object-position:50% 50%;mask-image:none;clip-path:none;transform:none;filter:none;visibility:visible;opacity:0;pointer-events:none;transition:opacity 300ms ease}
#dev .devframe img:first-child{opacity:1}
.js #dev .devframe img{opacity:0}
.js #dev .devframe img.dev-active{opacity:1}
/* Small subject-preserving trims remove redundant surroundings, never fill by stretching.
   Portrait sketch/blanks need neutral side space inside the required landscape viewport. */
#dev .devframe img[data-d="0"],#dev .devframe img[data-d="3"]{height:110%;top:-5%}
#dev .devframe img[data-d="1"]{object-fit:cover;object-position:50% 35%}
#dev .devframe img[data-d="2"]{height:140%;top:-20%}
#dev .dev-ring{grid-column:2;grid-row:1;position:relative;width:100%;height:auto;aspect-ratio:1/.68;min-height:13rem}
#dev .dev-ring-centre{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;text-align:center}
#dev #dev-number{font:400 clamp(2.5rem,4vw,4rem)/1 var(--serif)}
#dev #dev-name{font:400 .68rem/1.4 var(--mono);max-width:35%;margin-top:.4rem}
#dev .dev-segment{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;color:var(--ink);pointer-events:none;outline:none}
#dev .dev-segment svg{position:absolute;width:50%;height:auto;aspect-ratio:1;left:25%;top:50%;translate:0 -50%;overflow:visible;fill:none;pointer-events:none}
#dev .dev-arc{stroke:#E3DCD2;stroke-width:2.5px;vector-effect:non-scaling-stroke;transition:stroke 300ms;pointer-events:none}
#dev .dev-arc-hit{stroke:transparent;stroke-width:30;pointer-events:stroke;cursor:pointer}
#dev .dev-segment[aria-pressed="true"] .dev-arc{stroke:var(--copper);stroke-width:3.5px}
#dev .dev-segment:hover .dev-arc{stroke:#C6B9AA}
#dev .dev-segment[aria-pressed="true"]:hover .dev-arc{stroke:#C8673C}
#dev .dev-ring-label{position:absolute;pointer-events:auto;cursor:pointer;white-space:nowrap;font:400 clamp(.7rem,.8vw,.8rem)/1.4 var(--mono);min-height:44px;display:flex;align-items:center;padding:.3rem .15rem}
#dev .dev-segment[data-stage="0"] .dev-ring-label{left:0;top:0}
#dev .dev-segment[data-stage="1"] .dev-ring-label{right:0;top:0}
#dev .dev-segment[data-stage="2"] .dev-ring-label{right:0;bottom:0}
#dev .dev-segment[data-stage="3"] .dev-ring-label{left:0;bottom:0}
#dev .dev-segment:focus-visible .dev-ring-label{outline:2px solid var(--copper);outline-offset:2px;border-radius:3px}
#dev .dev-segment:focus-visible .dev-arc{stroke:var(--ink);stroke-width:4.5px}
#dev .devcap{grid-column:2;grid-row:2;min-width:0}
#dev .devcap h3{font-size:clamp(1.75rem,2.8vw,2.5rem)}
#dev .devcap #dd{min-height:3.2em;font-size:1rem;line-height:1.6}
#dev .dev-links{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;margin-top:1.25rem}
#dev .dev-links .dev-large{margin:0}
#dev .dev-links a{min-height:44px;display:inline-flex;align-items:center}
html:not(.js) #dev .dev-ring{display:none}
html:not(.js) #dev .devcap{grid-row:1/3}
#dev .dev-fallback{padding-left:1.2rem;line-height:2}
@media(max-width:767px){
 #dev .dev{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;gap:1.5rem}
 #dev .dev-ring{grid-column:1;grid-row:1;width:100%;max-width:22rem;margin:auto;height:15rem;min-height:0;aspect-ratio:auto}
 #dev .dev-segment svg{width:10rem;left:calc(50% - 5rem)}
 #dev .dev-ring-label{font-size:clamp(.68rem,3.2vw,.75rem)}
 #dev #dev-number{font-size:3rem}#dev #dev-name{font-size:.7rem;max-width:7rem}
 #dev .devframe{grid-column:1;grid-row:2}
 #dev .devcap{grid-column:1;grid-row:3}
 html:not(.js) #dev .devframe{grid-row:1}html:not(.js) #dev .devcap{grid-row:2}
}
@media(prefers-reduced-motion:reduce){#dev .devframe img,#dev .dev-arc{transition:none!important}}


/* Restore the original visible scrubber while keeping the current ring and photo crop. */
#dev .dev-visual{grid-column:1;grid-row:1/3;min-width:0}
#dev .dev-visual .devframe{display:block}
#dev .dev-visual .scrub{margin-top:1.375rem}
#dev .dev-visual .rng{height:44px;touch-action:pan-y}
#dev .dev-visual .ticks{grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem}
#dev .dev-visual .ticks button{font-size:max(.875rem,14px);letter-spacing:0;white-space:nowrap;min-height:44px;padding:.375rem 0}
html:not(.js) #dev .scrub{display:none}
@media(max-width:767px){#dev .dev-visual{grid-column:1;grid-row:2}html:not(.js) #dev .dev-visual{grid-row:1}}
@media(max-width:600px){#dev .dev-visual .ticks{grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .5rem}#dev .dev-visual .ticks button{text-align:left;white-space:normal}}

#dev .dev{margin-top:2rem;row-gap:1rem}#dev .dev-links{gap:.4rem;margin-top:.8rem}
#dev .dev-ring-label{font-size:max(.8125rem,13px)}#dev #dev-name{font-size:max(.75rem,12px)}
@media(max-width:600px){#dev .dev{gap:1.25rem}}

/* Homepage only: retain the hammer, all four ticks and images; remove duplicate ring UI. */
body[data-page="index"] #dev .dev{grid-template-rows:auto;align-items:center}
body[data-page="index"] #dev .dev-ring{display:none}
body[data-page="index"] #dev .dev-visual{grid-column:1;grid-row:1}
body[data-page="index"] #dev .devcap{grid-column:2;grid-row:1}
body[data-page="index"] #dev .devcap .st{display:none}
@media(max-width:767px){body[data-page="index"] #dev .dev{grid-template-columns:minmax(0,1fr);gap:1.5rem}body[data-page="index"] #dev .dev-visual{grid-column:1;grid-row:1}body[data-page="index"] #dev .devcap{grid-column:1;grid-row:2}}

/* R6 conservative candidate: keep the ring and all four bindings; put the work first. */
body[data-page="custom-development"] #dev .dev-ring{height:224px;min-height:0;aspect-ratio:auto}
body[data-page="custom-development"] #dev .dev-segment svg{width:160px;left:calc(50% - 80px)}
@media(max-width:767px){body[data-page="custom-development"] #dev .dev-visual{grid-row:1}body[data-page="custom-development"] #dev .dev-ring{grid-row:2;height:176px}body[data-page="custom-development"] #dev .dev-segment svg{width:120px;left:calc(50% - 60px)}body[data-page="custom-development"] #dev .devcap{grid-row:3}body[data-page="custom-development"] #dev .dev{row-gap:16px}}

/* R6 pixel follow-up: retain four interactive stage entries, quiet repeated non-interactive labels. */
body[data-page="custom-development"] #dev .devcap .st,body[data-page="custom-development"] #dev #dev-name{display:none}