:root,[data-theme=light]{--mosaic-dim:.42;--mosaic-tile:var(--color-logo-tile);--mosaic-picked:var(--color-logo-tile)}:root[data-theme=dark],[data-theme=dark]{--mosaic-dim:.4;--mosaic-tile:var(--color-surface-raised);--mosaic-picked:var(--color-canvas)}@media (prefers-color-scheme:dark){:root:not([data-theme]){--mosaic-dim:.4;--mosaic-tile:var(--color-surface-raised);--mosaic-picked:var(--color-canvas)}}.tech-mosaic{width:min(100%,32rem);margin-inline:auto;position:relative}.tech-mosaic-field{padding-bottom:2rem;position:relative}.tech-mosaic-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:.625rem;display:grid;-webkit-mask-image:radial-gradient(60% 64% at 50% 46%,#000 60%,#0000 100%);mask-image:radial-gradient(60% 64% at 50% 46%,#000 60%,#0000 100%)}.tech-mosaic-tile{aspect-ratio:1;border-radius:var(--radius-md);background:var(--mosaic-tile);box-shadow:0 0 0 1px var(--color-line);opacity:var(--mosaic-dim);filter:grayscale();transition:opacity var(--duration-surface) var(--ease-enter), filter var(--duration-surface) var(--ease-enter), box-shadow var(--duration-surface) var(--ease-enter);place-items:center;display:grid;position:relative}.tech-mosaic-tile[data-picked]{background:var(--mosaic-picked);opacity:1;filter:none;box-shadow:var(--shadow-ring-accent), var(--shadow-soft);transition-delay:calc(var(--order) * .14s + .12s)}.tech-mosaic-logo{width:46%;height:46%}.tech-mosaic-check,.tech-mosaic-done{border-radius:var(--radius-full);background:var(--color-accent);position:absolute}.tech-mosaic-check{width:1.05rem;height:1.05rem;transition:scale var(--duration-base) var(--ease-spring);top:-.3rem;right:-.3rem;scale:0}.tech-mosaic-tile[data-picked] .tech-mosaic-check{transition-delay:calc(var(--order) * .14s + .36s);scale:1}.tech-mosaic-check:after,.tech-mosaic-done:after{content:"";border-bottom:1.5px solid var(--color-on-accent);border-left:1.5px solid var(--color-on-accent);width:.42rem;height:.24rem;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)rotate(-45deg)}.tech-mosaic-tile:after{content:attr(data-name);z-index:1;border-radius:var(--radius-xs);background:var(--color-ink);color:var(--color-canvas);font-size:var(--text-caption);line-height:var(--text-caption--line-height);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast) var(--ease-out), translate var(--duration-base) var(--ease-out);padding:.25rem .5rem;font-weight:500;position:absolute;bottom:calc(100% + .375rem);left:50%;translate:-50% .25rem}@media (hover:hover){.tech-mosaic-tile:hover{z-index:1;opacity:1;filter:none;transition-delay:0s}.tech-mosaic-tile:hover:after{opacity:1;translate:-50%}}.tech-mosaic-stack{z-index:2;border-radius:var(--radius-full);background:var(--color-surface-raised);box-shadow:var(--shadow-ring), var(--shadow-float);white-space:nowrap;align-items:center;gap:.75rem;padding:.375rem .5rem .375rem 1rem;display:flex;position:absolute;bottom:0;left:50%;translate:-50%}.tech-mosaic-name{font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--text-caption--line-height);color:var(--color-ink-muted)}.tech-mosaic-chip{border-radius:var(--radius-full);background:var(--mosaic-picked);width:2.25rem;height:2.25rem;box-shadow:var(--shadow-logo);place-items:center;margin-left:-.375rem;display:grid}.tech-mosaic-chip:first-child{margin-left:0}.tech-mosaic-done{flex-shrink:0;width:1.5rem;height:1.5rem;position:relative}@media not (min-width:40rem){.tech-mosaic-grid{gap:.375rem}.tech-mosaic-stack{gap:.5rem;padding-left:.75rem}.tech-mosaic-chip{width:1.75rem;height:1.75rem}}@media (prefers-reduced-motion:no-preference){.tech-mosaic-stack{animation:tech-mosaic-rise var(--duration-surface) var(--ease-enter) .9s backwards}.tech-mosaic-chip,.tech-mosaic-done{animation:tech-mosaic-pop var(--duration-base) var(--ease-spring) backwards;animation-delay:calc(var(--order,6) * 70ms + 1s)}}@keyframes tech-mosaic-rise{0%{opacity:0;translate:-50% .75rem}}@keyframes tech-mosaic-pop{0%{scale:0}}
.crit-connect-wire{fill:none;stroke:var(--color-line-strong);stroke-width:1.5px}.crit-svg-card{fill:var(--color-surface-raised);stroke:var(--color-line)}.crit-svg-logo{fill:var(--color-logo-tile);stroke:var(--color-line)}.crit-svg-core{fill:var(--color-ink)}.crit-svg-label{fill:var(--color-ink);font-family:var(--font-sans);font-size:14px;font-weight:500}.crit-svg-mono{font-family:var(--font-mono);opacity:.7;font-size:12px}.crit-svg-on-core{fill:var(--color-canvas)}.crit-connect-packet{fill:var(--color-ink)}@media (prefers-reduced-motion:reduce){.crit-connect-packet{display:none}}.crit-costs-bar{transform-origin:0}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.crit-costs-bar{animation:linear both crit-costs-grow;animation-timeline:view();animation-range:entry calc(20% + var(--row) * 10%) cover 45%}}}@keyframes crit-costs-grow{0%{scale:0 1}}.crit-growth-stage{min-width:min(5rem,33.3333% - 1.33333rem)}@media (min-width:40rem){.crit-growth-stage{min-width:min(6rem,33.3333% - 1.33333rem)}}
.tech-card{border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-ring);transition:background-color var(--duration-fast) var(--ease-out);overflow:hidden}.tech-card:hover,.tech-card[data-open]{background:var(--color-surface-raised)}.tech-card-trigger{text-align:left;cursor:pointer;width:100%;padding:1.5rem;display:block}.tech-card-trigger:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px;border-radius:var(--radius-xl)}.tech-card-plus{flex-shrink:0;width:.75rem;height:.75rem;position:relative}.tech-card-plus:before,.tech-card-plus:after{content:"";border-radius:var(--radius-full);background:var(--color-ink-muted);width:100%;height:1.5px;position:absolute;top:calc(50% - .5px);left:0}.tech-card-plus:after{transition:rotate var(--duration-base) var(--ease-enter);rotate:90deg}.tech-card[data-open] .tech-card-plus:after{rotate:0deg}.tech-card-fan{grid-template-columns:repeat(4,minmax(0,1fr));place-items:center;width:min(100%,17.5rem);min-height:7.5rem;margin-inline:auto;padding-top:1.5rem;display:grid}.tech-card-preview{--offset:65%;--lift:.5rem;--tilt:-14deg;aspect-ratio:1;border-radius:var(--radius-lg);background:var(--color-logo-tile);width:min(100%,4rem);box-shadow:var(--shadow-logo), var(--shadow-soft);transform:translate(var(--offset), var(--lift)) rotate(var(--tilt)) scale(.94);transition:transform var(--duration-surface) var(--ease-exit);transition-delay:calc((3 - var(--order)) * 30ms);place-items:center;display:grid}.tech-card-preview:nth-child(2){--offset:22%;--lift:-.375rem;--tilt:-5deg}.tech-card-preview:nth-child(3){--offset:-22%;--lift:-.375rem;--tilt:5deg}.tech-card-preview:nth-child(4){--offset:-65%;--tilt:14deg}.tech-card:hover .tech-card-preview{--lift:0rem}.tech-card[data-open] .tech-card-preview{transition-timing-function:var(--ease-spring);transition-delay:calc(var(--order) * 40ms);transform:translate(0)rotate(0)scale(1)}.tech-card-panel{height:var(--collapsible-panel-height);transition:height var(--duration-surface) var(--ease-enter);overflow:hidden}.tech-card-panel[data-starting-style],.tech-card-panel[data-ending-style]{height:0}.tech-card-panel[data-ending-style]{transition-timing-function:var(--ease-exit)}.tech-card-content{transition:opacity var(--duration-base) var(--ease-enter), translate var(--duration-surface) var(--ease-enter);padding:0 1.5rem 1.5rem}.tech-card-panel[data-starting-style] .tech-card-content,.tech-card-panel[data-ending-style] .tech-card-content{opacity:0;translate:0 -.375rem}@media (prefers-reduced-motion:reduce){.tech-card-plus,.tech-card-preview,.tech-card-panel,.tech-card-content{transition:none}}

