.g-traffic-jam{--tj-c0:#e0342b;--tj-c1:#2f6fd0;--tj-c2:#f2c23a;--tj-c3:#2fa35a;--tj-c4:#8a54cf;--tj-c5:#f0813a;--tj-c6:#26b5c9;--tj-c7:#ec6fae;--tj-c8:#a26a3c;--tj-c9:#8d93a3;--tj-asphalt:var(--c-surface-3);--tj-line:color-mix(in srgb, var(--c-text) 10%, transparent);gap:var(--sp-3)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .g-traffic-jam{--tj-c1:#6ea2f5;--tj-c3:#4fc47a;--tj-c4:#b283f0;--tj-c8:#c58b5a}}:root[data-theme=dark] .g-traffic-jam{--tj-c1:#6ea2f5;--tj-c3:#4fc47a;--tj-c4:#b283f0;--tj-c8:#c58b5a}.g-traffic-jam :focus-visible{outline:3px solid var(--c-focus);outline-offset:2px}.g-traffic-jam .tj-lot{aspect-ratio:1;border-radius:var(--r-lg);background:var(--tj-asphalt);width:min(100%,400px);box-shadow:inset 0 0 0 4px var(--c-border-strong);--cell:calc(100% / 6);margin-inline-end:6%;position:relative}.g-traffic-jam .tj-cell{width:var(--cell);height:var(--cell);border:1px dashed var(--tj-line);cursor:default;background:0 0;padding:0;position:absolute;inset-block-start:calc(var(--r) * var(--cell));inset-inline-start:calc(var(--c) * var(--cell))}.g-traffic-jam .tj-cell.is-target{background:color-mix(in srgb, var(--c-brand) 18%, transparent);cursor:pointer}.g-traffic-jam .tj-exit{width:8%;height:calc(var(--cell) - 12%);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--c-good-soft);color:var(--c-good);font-size:var(--fs-md);pointer-events:none;place-items:center;display:grid;position:absolute;inset-block-start:calc(var(--r) * var(--cell) + 6%);inset-inline-start:100%}.g-traffic-jam .tj-exit:before{content:"";background:var(--tj-asphalt);width:4px;position:absolute;inset-block:-6%;inset-inline-start:-4px}.g-traffic-jam .tj-vehicles{pointer-events:none;position:absolute;inset:0}.g-traffic-jam .tj-vehicle{width:var(--cell);height:var(--cell);border-radius:var(--r-sm);color:var(--tj-paint);cursor:pointer;pointer-events:auto;background:0 0;border:0;padding:2%;position:absolute;inset-block-start:calc(var(--r) * var(--cell));inset-inline-start:calc(var(--c) * var(--cell))}.g-traffic-jam .tj-vehicle.is-h{width:calc(var(--len) * var(--cell))}.g-traffic-jam .tj-vehicle.is-v{height:calc(var(--len) * var(--cell))}.g-traffic-jam .tj-vehicle[data-color="0"]{--tj-paint:var(--tj-c0)}.g-traffic-jam .tj-vehicle[data-color="1"]{--tj-paint:var(--tj-c1)}.g-traffic-jam .tj-vehicle[data-color="2"]{--tj-paint:var(--tj-c2)}.g-traffic-jam .tj-vehicle[data-color="3"]{--tj-paint:var(--tj-c3)}.g-traffic-jam .tj-vehicle[data-color="4"]{--tj-paint:var(--tj-c4)}.g-traffic-jam .tj-vehicle[data-color="5"]{--tj-paint:var(--tj-c5)}.g-traffic-jam .tj-vehicle[data-color="6"]{--tj-paint:var(--tj-c6)}.g-traffic-jam .tj-vehicle[data-color="7"]{--tj-paint:var(--tj-c7)}.g-traffic-jam .tj-vehicle[data-color="8"]{--tj-paint:var(--tj-c8)}.g-traffic-jam .tj-vehicle[data-color="9"]{--tj-paint:var(--tj-c9)}.g-traffic-jam .tj-art{filter:drop-shadow(0 2px 2px #00000040);width:100%;height:100%;display:block;overflow:visible}.g-traffic-jam .tj-body{fill:currentColor;stroke:color-mix(in srgb, currentColor 60%, #000 40%);stroke-width:3px}.g-traffic-jam .tj-cargo{fill:color-mix(in srgb, currentColor 70%, #fff 30%);stroke:color-mix(in srgb, currentColor 60%, #000 40%);stroke-width:2px}.g-traffic-jam .tj-roof{fill:color-mix(in srgb, currentColor 80%, #000 20%)}.g-traffic-jam .tj-glass{fill:#cfe9f7;stroke:color-mix(in srgb, currentColor 50%, #000 50%);stroke-width:2px}.g-traffic-jam .tj-wheel{fill:#2b2b36}.g-traffic-jam .tj-lamp{fill:#fff3b0}.g-traffic-jam .tj-vehicle.is-selected .tj-body{stroke:var(--c-text);stroke-width:6px}.g-traffic-jam .tj-vehicle.is-hinted{outline:4px solid var(--c-accent);outline-offset:-2px}.g-traffic-jam .tj-vehicle:disabled{cursor:default}.g-traffic-jam .tj-vehicle.is-out{opacity:0;inset-inline-start:108%}.g-traffic-jam.is-done .tj-lot{box-shadow:inset 0 0 0 4px var(--c-good)}.g-traffic-jam .tj-msg{max-width:36ch;min-height:2.6em;color:var(--c-text-dim);font-size:var(--fs-md);font-weight:var(--fw-med);line-height:var(--lh-snug);text-align:center;text-wrap:balance;margin:0}.g-traffic-jam .tj-msg.is-good{color:var(--c-good);font-weight:var(--fw-bold)}.g-traffic-jam .tj-note{max-width:40ch;color:var(--c-text-faint);font-size:var(--fs-xs);text-align:center;margin:0}.g-traffic-jam.is-done .tj-note{visibility:hidden}.g-traffic-jam .tj-vehicle,.g-traffic-jam .tj-cell{transition:none}@media (prefers-reduced-motion:no-preference){.g-traffic-jam.is-motion .tj-vehicle{transition:inset-block-start var(--dur-slow) var(--ease-out), inset-inline-start var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease)}.g-traffic-jam.is-motion .tj-vehicle.is-out{transition:inset-inline-start .7s var(--ease), opacity .7s var(--ease)}.g-traffic-jam.is-motion .tj-cell{transition:background-color var(--dur-fast) var(--ease)}}