/* Developer mode · iOS teardown canvas */
.devwrap{display:flex;flex-direction:column;align-items:center;gap:14px;flex:none}
.device{position:relative;border-radius:13.5% / 6.2%;background:#0B0D0F;box-shadow:0 0 0 1.5px #2b2e33,0 0 0 9px #15181c,0 0 0 10px #2b2e33,0 60px 120px -40px rgba(0,0,0,.85);transition:filter .6s var(--ease),opacity .6s}
.device.dim{filter:saturate(.6) brightness(.55)}
.shot{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background:#F6F2EA}
.shot img.frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s var(--ease)}
.shot img.frame.on{opacity:1}
.ann{position:absolute;inset:0;pointer-events:none}
.abox{position:absolute;border:1px solid rgba(240,122,69,.9);background:rgba(240,122,69,.07);border-radius:4px;opacity:0;transform:scale(1.04);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:auto;cursor:pointer}
.abox.on{opacity:1;transform:none}
.shotcap{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--d-ink-2);max-width:460px;text-align:center;justify-content:center;min-height:24px}
.tag-sim{font-family:var(--mono);font-size:10px;color:#7FA7E6;background:rgba(127,167,230,.1);border:1px solid rgba(127,167,230,.28);padding:2px 7px;border-radius:5px;white-space:nowrap}
/* brand construction */
.logo-con .lg{width:180px;height:180px}
svg.cons{width:180px;height:180px;overflow:visible}
svg.cons .ctl line{stroke:#7FA7E6;stroke-width:.35;opacity:.8}
svg.cons .ctl circle{fill:#0E1013;stroke:#7FA7E6;stroke-width:.4}
svg.cons .anc rect{fill:#0E1013;stroke:#F07A45;stroke-width:.4}
svg.cons .ln,svg.cons .br{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:dr 1.6s var(--ease) .2s forwards}
svg.cons .ln{stroke:#ECE8E1} svg.cons .br{stroke:#E0632E;animation-delay:.9s}
svg.cons .ey{fill:#ECE8E1;opacity:0;animation:fi .4s 1.8s forwards}
@keyframes dr{to{stroke-dashoffset:0}} @keyframes fi{to{opacity:1}}
.note-d code{font-family:var(--mono);font-size:10.5px;color:#7FA7E6;background:rgba(127,167,230,.1);padding:0 4px;border-radius:4px}
/* screens gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gal figure{margin:0;cursor:pointer}
.gal img{width:100%;border-radius:12px;border:1px solid var(--d-line);transition:transform .4s var(--ease),border-color .3s}
.gal figure:hover img{transform:translateY(-3px);border-color:rgba(240,122,69,.6)}
.gal figcaption{font-size:11px;color:var(--d-ink-3);margin-top:6px;line-height:1.45}
.gal figcaption b{display:block;color:var(--d-ink);font-size:12px;font-weight:600}
/* storyboard */
.story{list-style:none;margin:0;padding:0;counter-reset:s}
.story li{counter-increment:s;position:relative;padding:9px 0 9px 34px;font-size:12.5px;line-height:1.55;color:var(--d-ink-3);border-top:1px solid var(--d-line);transition:color .4s}
.story li:first-child{border-top:0}
.story li::before{content:"0" counter(s);position:absolute;left:0;top:9px;font-family:var(--mono);font-size:11px;color:var(--d-ink-3)}
.story li b{display:block;color:var(--d-ink-2);font-weight:600;font-size:13px}
.story li.on{color:var(--d-ink-2)} .story li.on b{color:#fff} .story li.on::before{color:#F07A45}
video.rs{width:100%;max-width:240px;display:block;margin:0 auto;border-radius:22px;border:1px solid var(--d-line)}
@media (max-width:820px){ .gal{grid-template-columns:repeat(2,1fr)} }
.ann svg.leads{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;opacity:0;transition:opacity .6s .3s}
.ann.on svg.leads{opacity:1}
.ann svg.leads path{fill:none;stroke:rgba(240,122,69,.55);stroke-width:1}
.labels{position:absolute;left:calc(100% + 42px);top:0;width:210px;height:100%;pointer-events:none}
.alab{position:absolute;left:0;transform:translateY(-50%);font-size:11.5px;line-height:1.45;color:var(--d-ink-2);opacity:0;transition:opacity .5s var(--ease);pointer-events:auto;cursor:pointer}
.alab.on{opacity:1}
.alab b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;color:#F07A45;letter-spacing:.02em}
@media (max-width:820px){ .labels,.ann svg.leads{display:none} }

.cv-body:has(.side.on) .labels,.cv-body:has(.side.on) svg.leads{display:none}