.orb-energy-canvas { position: absolute; z-index: 5; pointer-events: none; user-select: none; display: block; max-width: none; opacity: 1; mix-blend-mode: screen; } .lens-visual, .system-visual {isolation:isolate;} .lens-visual .lens-satellite, .system-visual .sys-node {z-index: 6;} .canvas-frame .orb-energy-canvas {z-index: 4;} .canvas-frame .core-trigger {z-index: 7;} .system-visual .sys-center-button, .lens-visual .lens-core-button {z-index: 8;} .canvas-frame.inspecting .orb-energy-canvas {visibility: hidden;} .canvas-frame .core-trigger { --engine-diameter: clamp(126px, 34%, 188px); width: var(--engine-diameter); height: auto; aspect-ratio: 1; min-width: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(101,241,165,.50); padding: 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: radial-gradient(circle at 36% 28%, rgba(18,91,52,.56), rgba(5,25,14,.86) 79%); box-shadow: 0 0 26px rgba(0,239,139,.10), inset 0 0 18px rgba(0,239,139,.045); overflow: visible; cursor: pointer; user-select: none; touch-action: manipulation; } .canvas-frame .core-trigger > br {display: none;} .canvas-frame .core-trigger #engineCoreMeta { font-size: clamp(9px, .75vw, 11px); color: #c0ffe1; text-shadow: 0 1px 3px #041509, 0 0 8px #002a19; letter-spacing: .045em; white-space: nowrap; margin-top: 12px; max-width: 100%; } .canvas-frame .core-trigger:hover,.canvas-frame .core-trigger:focus-visible { border-color: #b4ffd0; box-shadow: 0 0 0 6px #00ef8b0e, 0 0 42px #00ef8b40; } #engineCore,#sysCenter,#lensCenter {cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;} .orb-scanning {--scan-active:1;} .personal .launch-center strong {font-size:clamp(29px,6.3vw,80px);max-width:1100px;line-height:1.06;} .intro-inline {appearance:none;background:transparent;border:0;color:var(--green);padding:0;cursor:pointer;font:inherit;} @media(max-width:650px){.personal .launch-center strong{font-size:clamp(27px,7vw,43px)}.personal .launch-center p{font-size:9px;line-height:1.65;max-width:270px}} .personal-manifesto {overflow:hidden;} #engineCore[data-charge="4"],#engineCore[data-charge="5"], #sysCenter[data-charge="4"],#sysCenter[data-charge="5"], #lensCenter[data-charge="4"],#lensCenter[data-charge="5"] { border-color:#84ffc1; box-shadow:0 0 20px rgba(0,245,138,.18),inset 0 0 12px rgba(0,245,138,.06); } .orb-charge-panel { position:relative; z-index:7; width:100%; max-width:580px; margin:11px auto 9px; min-height:39px; padding:5px 7px 5px 12px; box-sizing:border-box; border:1px solid #315a41; background:#07180e; display:flex; align-items:center; justify-content:space-between; gap:10px; } .orb-charge-status {display:flex;align-items:center;gap:11px;min-width:0;flex-wrap:wrap;} .orb-charge-numeral {font:11px var(--mono,monospace);letter-spacing:.045em;color:#d6ffe4;white-space:nowrap;} .orb-charge-cells {display:flex;gap:4px;flex-shrink:0;} .orb-charge-cells i {display:block;width:12px;height:5px;border:1px solid #478765;background:#102a1a;transition:background .18s,box-shadow .18s;} .orb-charge-cells i.charged {background:#00f58a;box-shadow:0 0 5px rgba(0,245,138,.46);} .orb-charge-panel.reactor-online {border-color:#388454;} .orb-charge-panel.reactor-online .orb-charge-numeral {color:#b5ffcc;} .orb-charge-reset {flex-shrink:0;border:1px solid #447b59;background:#10291a;color:#d1ffe2;padding:7px 11px;font:10px var(--mono,monospace);letter-spacing:.03em;min-height:28px;cursor:pointer;} .orb-charge-reset:hover:not(:disabled),.orb-charge-reset:focus-visible {border-color:#81ffb6;background:#1b3d29;color:#fff;} .orb-charge-reset:disabled {opacity:.40;cursor:not-allowed;} .hero-art:has(> .orb-charge-panel){height:auto;min-height:580px;} .hero-art > .orb-charge-panel {max-width:none;margin:9px 0 2px;} .hero-art > .canvas-frame {width:100%;max-height:min(540px,56vh);} .system-stage > .orb-charge-panel {max-width:580px;} .lens-stage > .orb-charge-panel {max-width:none;} @media(max-width:650px){ .hero-art:has(> .orb-charge-panel){height:auto;min-height:0;} .hero-art > .canvas-frame{max-height:none;} .orb-charge-panel{gap:7px;padding:7px 8px;min-height:41px;} .orb-charge-status{gap:7px;} .orb-charge-numeral{font-size:10px;} .orb-charge-cells{gap:2px;} .orb-charge-cells i{width:8px;height:4px;} .orb-charge-reset{font-size:10px;padding:6px 8px;} } @media(max-width:355px){ .orb-charge-numeral{font-size:10px;} .orb-charge-panel{padding:8px;flex-wrap:wrap;} .orb-charge-cells i{width:7px;} .orb-charge-reset{font-size:10px;margin-left:auto;} } @media(prefers-reduced-motion:reduce){.orb-charge-cells i{transition:none}} body.motion-off .orb-energy-canvas{opacity:.8} body.motion-off .orb-charge-cells i{transition:none} html {overflow-x: clip;} .system-visual .sys-orbit::before, .lens-visual .lens-ring::before { content:''; position:absolute; inset:-1px; border:1px solid rgba(96,255,167,.50); border-radius:50%; pointer-events:none; opacity:0; -webkit-mask-image:conic-gradient(#000 0turn calc(var(--reactor-progress,0) * 1turn), transparent 0turn); mask-image:conic-gradient(#000 0turn calc(var(--reactor-progress,0) * 1turn), transparent 0turn); } .system-visual.reactor-locking .sys-orbit::before, .system-visual.reactor-fully-charged .sys-orbit::before, .lens-visual.reactor-locking .lens-ring::before, .lens-visual.reactor-fully-charged .lens-ring::before {opacity:1;} .system-visual.reactor-fully-charged .sys-orbit, .lens-visual.reactor-fully-charged .lens-ring { border-color:rgba(96,255,167,.15); box-shadow:0 0 16px rgba(0,245,138,.08); } .orb-charge-panel.reactor-online { border-color: #4aac71; background: linear-gradient(95deg, #082618, #07180e 66%); } .orb-charge-panel.reactor-online .orb-charge-numeral {color:#bfffe1;} .orb-charge-panel.reactor-locking { animation: toychanReactorLock 2.05s ease-in-out both; } .orb-charge-panel.reactor-locking .orb-charge-cells i.charged { animation: toychanCellLock .55s ease-out backwards; } .orb-charge-panel.reactor-locking .orb-charge-cells i:nth-child(2) {animation-delay:.12s;} .orb-charge-panel.reactor-locking .orb-charge-cells i:nth-child(3) {animation-delay:.24s;} .orb-charge-panel.reactor-locking .orb-charge-cells i:nth-child(4) {animation-delay:.36s;} .orb-charge-panel.reactor-locking .orb-charge-cells i:nth-child(5) {animation-delay:.48s;} @keyframes toychanReactorLock { 0% {box-shadow:0 0 0 rgba(0,245,138,0);} 45% {box-shadow:0 0 12px rgba(0,245,138,.09);} 100% {box-shadow:0 0 22px rgba(0,245,138,.15);} } @keyframes toychanCellLock { 0% {background:#102a1a; box-shadow:none;} 100% {background:#00f58a;box-shadow:0 0 5px rgba(0,245,138,.46);} } @media (prefers-reduced-motion:reduce) { .orb-charge-panel.reactor-locking, .orb-charge-panel.reactor-locking .orb-charge-cells i.charged {animation:none !important;} } body.motion-off .orb-charge-panel.reactor-locking, body.motion-off .orb-charge-panel.reactor-locking .orb-charge-cells i.charged {animation:none !important;} .canvas-frame.reactor-locking #engineCore, .system-visual.reactor-locking #sysCenter, .lens-visual.reactor-locking #lensCenter { animation: toychanCoreLock 2.05s ease-in-out both; } @keyframes toychanCoreLock { 0% {filter:brightness(1);box-shadow:0 0 0 rgba(0,245,138,0);} 55% {filter:brightness(1.06);box-shadow:0 0 25px rgba(0,245,138,.15);} 100% {filter:brightness(1.10);box-shadow:0 0 32px rgba(0,245,138,.20);} } @media(prefers-reduced-motion:reduce) { .canvas-frame.reactor-locking #engineCore, .system-visual.reactor-locking #sysCenter, .lens-visual.reactor-locking #lensCenter {animation:none!important;} } body.motion-off .canvas-frame.reactor-locking #engineCore, body.motion-off .system-visual.reactor-locking #sysCenter, body.motion-off .lens-visual.reactor-locking #lensCenter {animation:none!important;} .reactor-canvas-mounted .sys-orbit::before, .reactor-canvas-mounted .lens-ring::before {display:none!important;} .reactor-canvas-mounted.reactor-locking #engineCore, .reactor-canvas-mounted.reactor-locking #sysCenter, .reactor-canvas-mounted.reactor-locking #lensCenter, .reactor-canvas-mounted.reactor-fully-charged #engineCore, .reactor-canvas-mounted.reactor-fully-charged #sysCenter, .reactor-canvas-mounted.reactor-fully-charged #lensCenter {animation:none!important;} .orb-charge-panel.reactor-locking, .orb-charge-panel.reactor-locking .orb-charge-cells i.charged {animation:none!important;} .orb-charge-panel[data-phase="discharging"] { border-color:#477b57; background:linear-gradient(90deg,#092318,#07180e); } .orb-charge-panel[data-phase="online"] { box-shadow:0 0 22px rgba(0,245,138,.12); } .orb-charge-panel[data-phase="discharging"] .orb-charge-reset {opacity:.55;} .orb-charge-cells i, .orb-charge-cells i.charged { background:linear-gradient(90deg, #00f58a 0%, #00f58a var(--charge-fill, 0%), #102a1a var(--charge-fill, 0%), #102a1a 100%)!important; box-shadow:none; transition:none; } .canvas-frame .core-trigger:is(:hover,:focus-visible,:active), .system-visual .sys-center-button:is(:hover,:focus-visible,:active), .lens-visual .lens-core-button:is(:hover,:focus-visible,:active) { scale: 1; } .system-visual .sys-center-button:is(:hover,:focus-visible,:active), .lens-visual .lens-core-button:is(:hover,:focus-visible,:active) { transform: none; } @keyframes toychanCoreCalm { 0% {filter:brightness(1);} 45% {filter:brightness(1.13);} 100% {filter:brightness(1);} } .studio-head .line-mask.outline > span { letter-spacing: -0.02em; -webkit-text-stroke: 1.4px #d2f6df; } .manifesto h2 { letter-spacing: -0.02em; } .manifesto h2 em { color: transparent !important; -webkit-text-stroke: 1.5px #043a22 !important; text-shadow: none !important; letter-spacing: -0.012em; font-style: normal; } @media (max-width: 650px) { .manifesto h2 em { display: inline-block; font-size: clamp(32px, 10.2vw, 60px); line-height: 1.04; white-space: nowrap; } } .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;clip-path:inset(50%)!important} .studio-head .line-mask.outline > .outline-visual{ -webkit-text-stroke:0; letter-spacing:normal; color:inherit; display:block; } .studio-head .line-mask.outline > .sr-only{display:block} .outline-art{display:block;width:100%;height:auto;max-width:100%;user-select:none;pointer-events:none} .studio-head .outline-art-hero{width:min(100%,5.92em);height:auto} .manifesto h2 .outline-visual-block{ display:block; width:100%; font-size:inherit; line-height:1; white-space:normal; margin-top:.055em; -webkit-text-stroke:0!important; color:inherit!important; text-shadow:none!important; font-style:normal; } .manifesto h2 .outline-art-manifesto{width:min(100%,8.56em);height:auto;max-width:100%} @media(max-width:650px){ .manifesto h2 .outline-visual-block{font-size:inherit;white-space:normal;margin-top:.12em;line-height:1.04} .manifesto h2 .outline-art-manifesto{width:100%;height:auto} }