/* One compact illustration of the tools' purpose and local workflow. */
.page-hero:has(.tool-principle) { min-height: 640px; padding: 7.5rem 2rem 3.5rem; }
.page-hero .hero-shell { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.tool-principle { min-width: 0; padding: 23px 24px 24px; border: 1px solid var(--card-border); border-radius: 22px; background: radial-gradient(ellipse at 50% 45%,rgba(0,230,118,.04),transparent 72%); box-shadow: 0 20px 60px rgba(0,0,0,.1); }
.principle-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: .59rem/1.5 'JetBrains Mono',monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.principle-local { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-4); }
.principle-local > span:first-child { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.principle-scene { display: block; width: 100%; height: auto; max-height: 270px; margin: 18px 0 8px; color: var(--accent-4); overflow: visible; }
.principle-monitor { fill: var(--bg-elevated); stroke: var(--text-muted); stroke-opacity: .23; }
.principle-divider,.principle-stand { fill: none; stroke: var(--text-muted); stroke-opacity: .22; stroke-width: 1; }
.principle-window-dot { fill: var(--text-dim); opacity: .6; }
.principle-brand { fill: var(--text-muted); font: 12px 'JetBrains Mono',monospace; }
.principle-route { fill: none; stroke: var(--text-muted); stroke-opacity: .2; }
.principle-tile { fill: var(--bg-elevated); stroke: var(--text-muted); stroke-opacity: .4; transition: stroke .6s,stroke-opacity .6s; }
.principle-file { fill: none; stroke: var(--text-muted); stroke-width: 1.2; }
.principle-engine-halo { fill: currentColor; opacity: .035; }
.principle-engine .principle-tile { stroke: currentColor; stroke-opacity: .45; }
.principle-play { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.principle-caption { fill: var(--text-muted); font: 13px 'JetBrains Mono',monospace; }
.principle-check,.principle-result-line { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: opacity .7s; }
.principle-result-line { stroke-width: 1; opacity: .25; }
.principle-signal { fill: none; stroke: var(--text-primary); stroke-width: 1.8; stroke-dasharray: 4 100; stroke-dashoffset: 4; opacity: 0; }
.principle-progress { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .6; }
.tool-principle.is-working .principle-signal { animation: principleTransit 3s linear both; }
.tool-principle.is-working .principle-progress { animation: principleProcess 3s ease-in-out both; }
.tool-principle.is-working .principle-input .principle-tile { stroke: var(--text-primary); stroke-opacity: .65; }
.tool-principle.is-done .principle-result .principle-tile { stroke: var(--accent-4); stroke-opacity: .65; }
.tool-principle.is-done .principle-check { opacity: 1; }
.principle-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; padding-top: 18px; border-top: 1px solid var(--card-border); }
.principle-values strong { display: block; font-size: .72rem; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.principle-values span { display: block; margin-top: 5px; font-size: .65rem; color: var(--text-muted); line-height: 1.5; }
.tool-principle.is-paused * { animation-play-state: paused !important; }
@keyframes principleTransit { 0% { opacity: 0; stroke-dashoffset: 4; } 10% { opacity: .8; } 45% { stroke-dashoffset: -48; stroke: var(--text-primary); } 63% { stroke-dashoffset: -48; stroke: var(--accent-4); } 90% { opacity: .8; } 100% { stroke-dashoffset: -100; stroke: var(--accent-4); opacity: 0; } }
@keyframes principleProcess { 30% { stroke-dashoffset: 100; opacity: .6; } 63% { stroke-dashoffset: 0; opacity: .6; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media(max-width:1024px) { .page-hero .hero-shell { grid-template-columns: 1fr; max-width: 680px; gap: 2.3rem; } .page-hero:has(.tool-principle) { min-height: 0; padding-top: 7rem; } }
@media(max-width:600px) { .page-hero:has(.tool-principle) { padding: 6.5rem 1.25rem 2.5rem; } .tool-principle { padding: 18px 12px; border-radius: 17px; } .principle-heading { font-size: .5rem; letter-spacing: .025em; } .principle-scene { margin-top: 16px; } .principle-values { gap: 8px; padding-top: 14px; } .principle-values strong { font-size: .64rem; } .principle-values span { font-size: .58rem; } .principle-caption { font-size: 15px; } }
@media(prefers-reduced-motion:reduce) { .tool-principle * { animation: none !important; transition: none !important; } .principle-result .principle-tile { stroke: var(--accent-4); stroke-opacity: .65; } .principle-check { opacity: 1; } }