@import url('../car/car.css');
header{direction:ltr}header>div{direction:rtl}main{grid-template-columns:minmax(0,1fr) 370px}.viewer{background:radial-gradient(ellipse at 40% 45%,#2b4358,#101b28 76%)}.space .viewer{background:radial-gradient(ellipse at 45% 48%,#182944,#070e1b 75%)}.settings h1{line-height:1.4}.sub{margin:8px 0 15px}#model-controls{border-bottom:1px solid #ffffff16}#detail h2{margin-top:4px}#description{white-space:pre-line;margin-bottom:14px}.detail-section{margin:18px 0 0}.detail-section h3{font-size:16px;font-weight:500;margin:0 0 7px;color:#edc98d}.detail-section p{font-size:16px;line-height:1.7;margin:0;color:#ccdbe6}.facts{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0}.facts th,.facts td{padding:9px 0;vertical-align:top;border-bottom:1px solid #ffffff12;text-align:right;line-height:1.5}.facts th{font-weight:400;color:#a8c1d3;width:43%;padding-left:12px}.facts td{color:#edf4f9;overflow-wrap:anywhere}.choice-row{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.choice-row button{flex:1}.choice-row button[data-wide]{flex-basis:100%}#labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}.model-label{position:absolute;transform:translate(-50%,-120%);font-size:13px;line-height:1.3;white-space:nowrap;border:1px solid #6789a280;padding:5px 8px;border-radius:5px;background:#142739df;color:#e2eef7}.model-label.active{color:#ffe0a8;border-color:#efbe73}.topline{font-size:13px}.hint{font-size:12px}#model-count{text-align:left}#legend{font-size:13px;line-height:1.65;color:#b9d0df}.step-panel{padding:14px;background:#223b50;border:1px solid #506c80;border-radius:8px;margin:14px 0}.step-panel strong{font-size:17px;font-weight:500;color:#f3d59d}.step-panel p{font-size:15px;line-height:1.7;color:#d4e2ec;margin:9px 0}.step-panel input{margin-top:8px}#play{width:100%;background:#365e77;border-color:#7198ad}#parts{display:grid;gap:3px;max-height:290px;overflow:auto}#parts .part-option{border-radius:6px;padding:6px}.part-option:has(input:checked){background:#2c4a60}.part-option button{flex:1;text-align:right;border:0;background:none;padding:5px;min-height:36px}#selection-count{font-size:13px;color:#a8c1d3}#sources{display:flex;flex-wrap:wrap;gap:14px}#model-note{max-width:950px;line-height:1.8}.source-note{font-size:13px;color:#aabfce}.picker-list{max-height:215px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}.picker-list button{text-align:right;font-size:14px;line-height:1.5}.picker-list small{display:block;color:#a8c1d3;font-size:12px}.picker-list .chosen{border-color:#efc68b;background:#365269}.picker-list button[hidden]{display:none}.picker-list:empty:after{content:'אין תוצאות לחיפוש הזה';padding:14px;color:#c1d3df}.library-picker{padding:19px 23px;border-bottom:1px solid #ffffff20}.library-picker h2{font-size:19px;margin:0 0 13px}.library-picker input{margin-bottom:10px}.periodic-panel{max-width:1800px;margin:auto;padding:18px 28px 22px;border-bottom:1px solid #ffffff18}.periodic-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}.periodic-heading h1{font-size:23px;font-weight:500;margin:0}.periodic-heading input{max-width:310px}.periodic-scroll{overflow:auto;direction:ltr;padding:3px 3px 10px}.periodic-table{display:grid;grid-template-columns:repeat(18,minmax(44px,1fr));grid-template-rows:repeat(10,48px);gap:4px;min-width:920px;max-width:1300px;margin:auto}.element-tile{padding:3px;min-height:0;position:relative;border-color:color-mix(in srgb,var(--element-color),transparent 60%);background:color-mix(in srgb,var(--element-color),#122130 85%);border-radius:5px;color:#edf4f9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}.element-tile strong{font:20px Georgia,serif}.element-tile small{font:12px Arial;color:#bdd0df}.element-tile.active{border-color:#ffe1a9;box-shadow:0 0 0 1px #ffe1a9;background:#496270}.element-tile.dimmed{opacity:.2}.periodic-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px auto 0;max-width:1300px;font-size:12px;color:#b4c9d8}.periodic-legend span:before{content:'';display:inline-block;width:9px;height:9px;background:var(--element-color);border-radius:2px;margin-left:6px}.periodic-caption{font-size:13px;line-height:1.6;color:#a9c0d1;margin:8px 0 0}.small-note{font-size:13px;line-height:1.6;color:#a9c0d1}.mode-control output{font-size:13px;color:#efca8f}.error-message{padding:25px;text-align:center}.viewer canvas:focus{outline:2px solid #dfb273;outline-offset:-3px}.hidden,[hidden]{display:none!important}#loading{position:absolute;inset:40% 10% auto;text-align:center;color:#cbd9e8;line-height:1.7}#loading button{pointer-events:auto;margin-top:10px}#app.full .topline{padding-left:10px}#app.full aside{width:min(400px,100%)}
@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 335px}.periodic-panel{padding:16px}.periodic-table{grid-template-rows:repeat(10,44px)}}
@media(max-width:760px){main{grid-template-columns:1fr}.viewer{height:65svh;min-height:420px}.topline{font-size:12px}.settings,.library-picker{padding:20px}.periodic-heading{align-items:start;flex-direction:column;gap:12px}.periodic-heading input{max-width:none}.periodic-heading h1{font-size:22px}.periodic-table{grid-template-rows:repeat(10,44px)}.periodic-caption{font-size:13px}.periodic-legend{gap:7px 12px}.screenbar{top:55px}.periodic-panel{padding:18px}.model-label{font-size:12px}.facts{font-size:14px}.hint{bottom:15px}.viewtools{bottom:58px}.picker-list{max-height:190px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.temperature-dock{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);width:min(340px,calc(100% - 32px));background:#0e2131ed;border:1px solid #6fa4bb80;border-radius:13px;padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:5px 18px;backdrop-filter:blur(12px);z-index:4;box-shadow:0 6px 28px #0004}.temperature-dock label{font-size:14px;display:flex;flex-direction:column;gap:6px}.temperature-dock input{width:100%;accent-color:#93daed;cursor:pointer;margin:0;min-height:25px}.temperature-dock output{font-size:22px;direction:ltr;align-self:center;color:#def5ff;white-space:nowrap;font-variant-numeric:tabular-nums}.temperature-dock span{grid-column:1/-1;font-size:13px;color:#abc8d6}body[data-model="water-drop"] .viewer{min-height:570px}body[data-model="water-drop"] .hint{font-size:12px}#parts .part-option[hidden]{display:none!important}
@media(max-width:760px){.temperature-dock{bottom:115px;width:min(300px,calc(100% - 32px))}body[data-model="water-drop"] .viewer{min-height:550px}}
/* Compact temperature control stays at the lower edge, clear of the droplet. */
.temperature-dock{bottom:calc(8px + env(safe-area-inset-bottom));width:228px;grid-template-columns:minmax(0,1fr) 66px;gap:0 10px;padding:7px 11px;border-radius:11px}.temperature-dock label{font-size:12px;margin:0;gap:0}.temperature-dock input{min-height:32px;margin:0}.temperature-dock output{font-size:18px}.temperature-dock span{font-size:11px;line-height:1.3;text-align:center;margin-top:1px}body[data-model="water-drop"] .hint{display:none}body[data-model="water-drop"] .viewtools,body[data-model="water-drop"] #app.full .viewtools{bottom:calc(96px + env(safe-area-inset-bottom))}@media(max-width:760px){.temperature-dock{width:220px;bottom:calc(8px + env(safe-area-inset-bottom))}.temperature-dock input{min-height:34px}body[data-model="water-drop"] .viewer{min-height:490px}}
/* Compact branch chooser remains in the scene, including fullscreen. */
.atom-dock{position:absolute;z-index:5;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:5px;padding:5px;border:1px solid #83aec04d;border-radius:12px;background:#122736ed;backdrop-filter:blur(12px);color:#d6e7ed}.atom-dock[hidden]{display:none}.atom-dock>span{font-size:12px;padding:0 6px}.atom-dock button{min-height:40px;padding:7px 10px;font-size:13px;border-radius:8px;white-space:nowrap}.atom-dock button[aria-pressed=true]{background:#d2e8f1;color:#142536;border-color:#d2e8f1}.atom-dock button:disabled{opacity:.5}.atom-dock button:focus-visible{outline:2px solid #e8c17d;outline-offset:2px}
@media(max-width:760px){.atom-dock{right:10px;bottom:calc(94px + env(safe-area-inset-bottom));gap:3px}.atom-dock>span{display:none}.atom-dock button{min-height:42px;padding:8px 11px}.water-drop .viewtools,.full.water-drop .viewtools{bottom:calc(151px + env(safe-area-inset-bottom))}}
.water-drop .atom-dock{bottom:calc(94px + env(safe-area-inset-bottom))}.water-drop .viewtools,.full.water-drop .viewtools{bottom:calc(96px + env(safe-area-inset-bottom))}.water-drop .viewer:has(.atom-dock:not([hidden])) .viewtools{bottom:calc(151px + env(safe-area-inset-bottom))}

.particle-dock,.lab-dock,.journey-scale{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:52px;padding:10px 14px;border:1px solid #8dbdca40;border-radius:16px;background:#122534e8;color:#dfedf0;backdrop-filter:blur(12px);max-width:calc(100% - 28px)}.particle-dock{display:flex;gap:7px;white-space:nowrap}.particle-dock button{border:1px solid #8dbdca55;border-radius:10px;padding:8px;background:#213b4c;color:inherit}.particle-dock button[aria-pressed=true]{background:#446776}.lab-dock{width:340px;display:grid;gap:8px;font-size:12px}.lab-dock small{color:#a7bdc9}.lab-dock label{display:flex;align-items:center;gap:9px}.lab-dock input{width:125px;accent-color:#9dded7}.lab-dock span{min-height:30px;line-height:1.5}.journey-scale{bottom:100px;font-size:12px;white-space:nowrap}.particle-dock[hidden],.lab-dock[hidden],.journey-scale[hidden],.temperature-dock[hidden],.atom-dock[hidden]{display:none}


body[data-simple] #parts-picker,body[data-simple] #focus,body[data-simple] #isolate,body[data-simple] #clear-selection,body[data-simple] #opacity-control,body[data-simple] #explode-control,body[data-simple] .viewtools,body[data-simple] #custom-controls,body[data-simple] #play,body[data-simple] .step-panel,body[data-simple] #steps,body[data-simple] label:has(#opacity){display:none!important}
body[data-simple] #app>.floating-info{display:block}body[data-simple] #app>.floating-info[hidden]{display:none!important}body[data-simple] #sidebar>.settings:last-child{display:none}body[data-model=water-drop] #sidebar{display:none}body[data-model=water-drop] #app{grid-template-columns:1fr}body[data-model=water-drop] .viewer{height:calc(100svh - 90px);min-height:420px}body[data-model=water-drop] #panel{display:none!important}body[data-model=water-drop] .atom-dock,body[data-model=water-drop] .particle-dock{display:none!important}
.floating-info-facts{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:14px;margin:14px 0 0}.floating-info-facts dt{color:#a9c7d7}.floating-info-facts dd{margin:0}

body[data-model=water-drop] .temperature-dock,body[data-model=water-drop] .lab-dock{left:8px;right:auto;bottom:calc(16px + env(safe-area-inset-bottom));transform:none;width:54px;max-width:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 3px;border-radius:12px;background:#142a37c9;box-shadow:none}
body[data-model=water-drop] .temperature-dock label,body[data-model=water-drop] .lab-dock label{display:flex;flex-direction:column;align-items:center;font-size:12px;gap:4px;margin:0}body[data-model=water-drop] .temperature-dock input,body[data-model=water-drop] .lab-dock input{writing-mode:vertical-lr;direction:rtl;width:28px;height:92px;min-height:0;margin:0;touch-action:none}body[data-model=water-drop] .temperature-dock output,body[data-model=water-drop] .lab-dock output{font-size:12px;line-height:1.4}body[data-model=water-drop] .temperature-dock span,body[data-model=water-drop] .lab-dock>small,body[data-model=water-drop] .lab-dock>span{display:none}body[data-model=water-drop] .journey-scale{bottom:18px;left:50%;font-size:12px;padding:5px 10px;background:#12253499}body[data-model=water-drop] .floating-info{left:74px;width:min(300px,calc(100% - 90px));max-height:45dvh}body[data-model=water-drop] #app>.floating-info{position:absolute}

body[data-simple] #app:not(.full){position:relative}

body[data-model=water-drop] .lab-explain{width:40px;height:36px;min-height:36px;padding:0;margin-top:3px;border:1px solid #9dded766;border-radius:9px;background:#254658;color:#fff;font-size:20px;line-height:1;cursor:pointer}

body[data-model=water-drop] .particle-label{font-size:12px;padding:3px 6px;background:#142739c9;border-color:#6789a24d;border-radius:5px;line-height:18px}
body[data-model=water-drop] #app>.floating-info{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:74px;right:auto;width:min(330px,calc(100% - 90px));max-height:min(28svh,230px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;padding:14px 16px}

/* Sperm journey: the same uninterrupted full-height exploration surface. */
body[data-model=sperm] .sperm-center-button{position:absolute;z-index:6;top:calc(112px + env(safe-area-inset-top));right:18px;width:46px;height:46px;min-height:46px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid #91bbc26b;background:#102d40e8;color:#e0f0f5;box-shadow:0 3px 14px #00162466;touch-action:manipulation}body[data-model=sperm] .sperm-center-button:hover{background:#204b60}body[data-model=sperm] .sperm-center-button:focus-visible{outline:2px solid #d1edf5;outline-offset:3px}body[data-model=sperm] .sperm-center-button:active{transform:scale(.95)}
body[data-model=sperm] #sidebar,body[data-model=sperm] #panel,body[data-model=sperm] .hint{display:none!important}body[data-model=sperm] #app{grid-template-columns:1fr}body[data-model=sperm] .viewer{height:calc(100svh - 90px);min-height:450px;background:#06314c}body[data-model=sperm] .sperm-journey-hint{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:14px;right:14px;text-align:center;color:#c5e3ed;font-size:13px;line-height:1.6;pointer-events:none;text-shadow:0 2px 10px #00111e}body[data-model=sperm] .sperm-color-key{position:absolute;bottom:calc(49px + env(safe-area-inset-bottom));left:12px;right:12px;text-align:center;font-size:13px;color:#ecf2f8;direction:rtl;pointer-events:none}body[data-model=sperm] #app>.floating-info{top:auto;bottom:calc(82px + env(safe-area-inset-bottom));right:14px;left:auto;width:min(350px,calc(100% - 28px));max-height:min(32svh,260px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}body[data-model=sperm] .particle-label{font-size:13px;padding:4px 8px;background:#0e2b40bd;border-color:#94c4d24d}

body[data-model=sperm] #labels .chromosome-label{pointer-events:auto;touch-action:manipulation;cursor:pointer;min-width:30px;min-height:30px;width:30px;height:30px;padding:0;border-radius:50%;font:14px/28px Arial,sans-serif;text-align:center;background:#092339b3;border:1px solid #b5d0e24d;color:#e1eaf3;box-shadow:0 2px 8px #0003;direction:ltr}body[data-model=sperm] #labels .chromosome-label:hover,body[data-model=sperm] #labels .chromosome-label:focus-visible{background:#24495de6;border-color:#d2e6ef;outline:2px solid #b8dced;outline-offset:2px}