@import './letter.css';
@import './field.css';
[data-svg-material-layer] path{pointer-events:stroke;cursor:grab}
/* Native entry borders become measured, detachable ink. The SVG never owns anchor hit areas. */
.vopi-public[data-page] .service-next:focus-visible,.vopi-public[data-page] .service-choice:focus-visible,.vopi-public[data-page] .path-controls button:focus-visible{border-radius:0}
.vopi-public .office-hero[data-branch-surface]{position:relative}
.vopi-public .office-hero[data-branch-surface] .route[data-branch-anchor]{border-bottom-color:transparent}
.branch-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.branch-surface [data-branch-piece] path{fill:none;stroke:var(--line);stroke-width:1.15;stroke-linecap:round;pointer-events:stroke;cursor:grab}
.branch-surface [data-branch-kind=root] path{stroke-width:1.5}
.branch-surface .branch-bead{fill:var(--gold)}
@media(forced-colors:active){.branch-surface [data-branch-piece] path{stroke:CanvasText!important}.branch-surface .branch-bead{fill:CanvasText}}
/* Shared host rules: content stays readable while the optional performance changes. */
html{scroll-behavior:auto;scroll-padding-top:26px}
.vopi-public .logo-play{display:block;position:relative;aspect-ratio:1592/988;max-width:100%;border:0;padding:0;background:transparent}
.vopi-public .logo-eye,.vopi-public .logo-law{position:absolute;inset:0;width:100%;height:100%}
.vopi-public .logo-eye img{display:block;width:100%;height:100%;clip-path:inset(0 0 16% 0)}
.vopi-public .logo-law{clip-path:inset(84% 0 0 0);pointer-events:none}
.vopi-public .blink-defs{position:absolute;pointer-events:none}
.vopi-public .blink-lid{position:absolute;inset:0;width:100%;height:100%;opacity:0;fill:none;pointer-events:none}
body:has(.vopi-public) .language-menu{position:absolute;right:0;top:100%;width:150px;padding:6px;background:var(--paper);border:1px solid var(--ink);box-shadow:3px 4px 0 var(--ochre);z-index:40}
body:has(.vopi-public) .language-menu a{display:block;padding:10px;min-height:44px}
body:has(.vopi-public) .language-menu a:hover{background:var(--pale)}
.vopi-public .brand-seat .logo-play,.vopi-public .brand-seat .life-anchor{width:154px;margin:0}
.vopi-public .logo-eye{transform:none}
.vopi-public .ways{grid-template-columns:minmax(0,.78fr) minmax(0,1.6fr);gap:8%;min-height:660px}
.vopi-public .section-heading h2{margin-top:0}
.service-story{min-width:0;padding-top:8px}
.service-choices{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.vopi-public .service-choice{border:0;border-bottom:1px solid transparent;background:none;padding:10px 1px;min-height:44px;font:400 18px var(--latin);text-align:left;position:relative}
.vopi-public .service-choice[aria-pressed=true]{color:var(--gold);border-bottom-color:var(--gold)}
.vopi-public .service-choice:hover{color:var(--gold)}
html[lang^=zh] .vopi-public .service-choice{font:400 22px var(--display)}
.ink-stage{position:relative;width:100%;max-width:640px;aspect-ratio:500/206;margin:28px 0 8px}
.ink-stage svg{display:block;width:100%;height:100%;overflow:visible}
.journey-path,.journey-draw,.journey-gold{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linecap:round}
.journey-gold{stroke:var(--gold);stroke-width:2.2;stroke-dasharray:0 1}
.journey-path{stroke-dasharray:2 7}
.journey-approach{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;pointer-events:none}
.journey-draw{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:1;stroke-dashoffset:1}
.client-token{fill:var(--ink)}
.lawyer-token{fill:var(--paper);stroke:var(--gold);stroke-width:2}
.actor-label{position:absolute;font:11px var(--body);top:0;color:var(--muted);white-space:nowrap}
.label-client{left:5%}.label-lawyer{right:6%;color:var(--gold)}
.vopi-public .ink-handle{position:absolute;top:calc(50% - 22px);left:9.6%;transform:translateX(-50%);width:44px;height:44px;background:transparent;border:0;color:var(--gold);touch-action:pan-y;cursor:grab;z-index:2}
.ink-handle>.handle-glyph{display:block;transform:translateY(29px);font-size:21px;transition:transform 160ms}
.ink-handle:hover>.handle-glyph{transform:translate(3px,29px)}
.ink-handle:active{cursor:grabbing}
.ink-caption{position:absolute;top:70%;left:0;right:0;text-align:center;font:400 13px/1.65 var(--body);color:var(--ink);text-wrap:balance}
.ink-invitation{position:absolute;bottom:0;left:0;font-size:11px;color:var(--muted)}
.ink-stage[data-state=moving] .ink-invitation,.ink-stage[data-state=held] .ink-invitation{visibility:hidden}
.service-reading{min-height:88px;max-width:440px}
.vopi-public .service-reading p{font:400 15px/1.9 var(--body);color:var(--muted);margin:0}
.vopi-public .service-next{display:inline-flex;align-items:center;gap:32px;padding:14px 0;min-height:48px;font-size:13px;border-bottom:1px solid var(--gold)}
.service-next>span:last-child{font-size:22px;color:var(--gold)}
.service-next:hover{color:var(--gold)}
@media(max-width:800px){.vopi-public .ways{display:block}.vopi-public .section-heading h2{max-width:none;white-space:normal;font-size:40px;margin-bottom:30px}.service-story{max-width:650px}.service-reading{min-height:104px}}
@media(max-width:640px){.vopi-public .brand-seat .logo-play,.vopi-public .brand-seat .life-anchor{width:125px}.service-choices{gap:3px 19px}.vopi-public .service-choice{font-size:18px}.ink-stage{margin-top:20px;min-height:240px}.ink-stage svg{position:absolute;inset:0}.actor-label{top:5%}.service-reading{min-height:124px}.vopi-public .service-reading p{font-size:14px}.vopi-public .ways{padding-top:44px;min-height:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ink-handle span{transition:none}}
@media(forced-colors:active){.journey-path,.journey-draw,.lawyer-token{stroke:CanvasText}.client-token{fill:CanvasText}.service-choice[aria-pressed=true]{border-bottom:2px solid Highlight}}
.ink-material-base,.ink-material-black,.ink-material-gold{fill:none;stroke-linecap:round;pointer-events:stroke}
.ink-material-base{stroke:var(--line);stroke-width:1.3;stroke-dasharray:2 7}
.ink-material-black{stroke:var(--ink);stroke-width:1.8}
.ink-material-gold{stroke:var(--gold);stroke-width:2.2}
.ink-materials>[data-ink-piece]{cursor:grab}
.ink-stage[data-missing-stroke=true] .ink-invitation{visibility:visible}
@media(forced-colors:active){.ink-material-base,.ink-material-black,.ink-material-gold{stroke:CanvasText}}

.vopi-public .path-controls{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:8px 0 20px;position:sticky;top:8px;z-index:5;background:var(--paper)}
.vopi-public .path-controls button{font:12px var(--body);min-height:44px;border:0;border-bottom:1px solid var(--gold);background:none;padding:8px 0;color:var(--gold)}
.vopi-public .path-controls button:disabled{opacity:.4;border-color:transparent;cursor:default}
.vopi-public .period-visit{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;min-height:44px;padding:6px 0;text-align:left}
.vopi-public .period-visit:hover,.vopi-public .period-visit[aria-pressed=true]{color:var(--gold);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.vopi-public .ink-record[data-current=true] h2{color:var(--gold)}
.vopi-public .ink-record,.vopi-public .current-chapter,.vopi-public #career-timeline{scroll-margin:110px}
.ink-stage[data-task-relay=true] .ink-invitation{visibility:hidden}
.vopi-public .path-performance{position:absolute;inset:0;width:100%;pointer-events:none;overflow:visible;z-index:1;transition:opacity 200ms}
.path-performance path{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-linecap:round}
.path-performance circle{fill:var(--gold)}
@media(prefers-reduced-motion:reduce){.vopi-public .path-performance{transition:none}}

/* A native preference control stays usable with every decorative layer removed. */
.quiet-tools .experience-switch{font:inherit;font-size:12px;letter-spacing:.02em;color:inherit;background:none;border:0;padding:8px 4px;min-height:44px;cursor:pointer;white-space:nowrap;}
.quiet-tools .experience-switch:hover{color:var(--gold,#806020)}
.quiet-tools .experience-switch:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.vopi-public:not([data-interaction="on"]) .ink-stage,.vopi-public:not([data-interaction="on"]) .path-performance{display:none}
@media(max-width:600px){.quiet-tools{flex-wrap:wrap;gap:8px}.quiet-tools .experience-switch{font-size:11px}}

/* FUN keeps a constant name; state is a quiet visual treatment and native semantics. */
.vopi-public .quiet-tools [data-vopi-fun]{min-width:44px;justify-content:center;position:relative;text-decoration:none;color:var(--muted,#635f57)}
.vopi-public .quiet-tools [data-vopi-fun][aria-checked=true]{color:var(--gold,#80601f)}
.vopi-public .quiet-tools [data-vopi-fun]::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;border-bottom:1px solid currentColor;opacity:0}
.vopi-public .quiet-tools [data-vopi-fun][aria-checked=true]::after{opacity:1}
.vopi-public .quiet-tools [data-vopi-fun][aria-busy=true]::after{border-bottom-style:dashed}
.vopi-public .quiet-tools [data-vopi-fun]:hover{color:var(--ink,#242322)}