/* SPDX-License-Identifier: MIT — floating, transparent microstructure inspector. */
.kup-entry{padding:14px;border:1px solid var(--cizgi);border-radius:10px;background:var(--yuzey);font-size:12px;color:var(--soluk)}
.kup-entry button{min-height:44px;width:100%;font-weight:650;color:var(--vurgu)}.kup-entry p{margin:8px 0 0;line-height:1.5}
.kup-dock{position:fixed;left:18px;bottom:18px;z-index:40;width:132px;padding:0 5px 8px;border:0;background:transparent;color:var(--metin);font:600 11px system-ui;filter:drop-shadow(0 9px 14px #0002);cursor:pointer}
.kup-dock:disabled{display:none}.kup-dock-preview{display:block;height:108px;width:124px;background:transparent}.kup-dock-preview canvas{width:100%!important;height:100%!important}.kup-dock-preview svg{width:100%;height:100%;fill:color-mix(in srgb,var(--yuzey) 75%,transparent);stroke:var(--vurgu);stroke-width:1.7;stroke-linejoin:round}
.kup-dock>span:last-child{display:inline-block;background:var(--yuzey);padding:6px 10px;border:1px solid var(--cizgi);border-radius:20px}
.kup-dock{width:170px}.kup-dock-preview{width:160px;height:144px}
@media(max-width:700px){.kup-dock{width:132px}.kup-dock-preview{width:124px;height:112px}}
.kup-dialog{color:var(--metin);background:color-mix(in srgb,var(--bg) 94%,transparent);border:1px solid var(--cizgi);border-radius:20px;padding:0;width:min(1450px,calc(100vw - 40px));max-width:none;height:min(960px,calc(100dvh - 36px));max-height:none;overflow:hidden;box-shadow:0 25px 100px #0004}
.kup-dialog::backdrop{background:#19232a66;backdrop-filter:blur(9px)}
.kup-dialog[open]{display:flex}.kup-shell{width:100%;display:flex;flex-direction:column;min-height:0}
.kup-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 24px;border-bottom:1px solid var(--cizgi);flex-shrink:0}
.kup-head h2{font-size:clamp(22px,2.4vw,34px);line-height:1.1;margin:5px 0 0;letter-spacing:-.035em}.kup-eyebrow{font:11px ui-monospace,monospace;color:var(--vurgu);letter-spacing:.08em}
.kup-head button{background:var(--metin);color:var(--bg);min-height:44px;border-radius:24px;padding:10px 16px;white-space:nowrap;font-weight:650}
.kup-live{padding:9px 24px;color:var(--soluk);font-size:12px;line-height:1.5;border-bottom:1px solid var(--cizgi);flex-shrink:0}
.kup-workspace{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:0;flex:1}
.kup-controls{overflow:auto;min-width:0;padding:18px;background:color-mix(in srgb,var(--yuzey) 85%,transparent);border-right:1px solid var(--cizgi);font-size:12px}
.kup-point{font:600 12px ui-monospace,monospace;margin-bottom:16px;line-height:1.6;color:var(--vurgu)}
.kup-field{display:block;margin-bottom:14px;min-width:0}.kup-field>span{display:block;font-size:11px;font-weight:650;color:var(--soluk);margin-bottom:6px}.kup-field select,.kup-field input[type=number]{width:100%;min-height:42px;background:var(--yuzey);color:var(--metin);border:1px solid var(--cizgi);padding:8px;border-radius:5px;min-width:0;font:13px system-ui}.kup-field input[type=range]{width:100%;accent-color:var(--vurgu);min-height:32px}.kup-field output{font-variant-numeric:tabular-nums}
.kup-axis{border:1px solid var(--cizgi);border-radius:6px;padding:8px;display:flex;gap:18px;margin:0 0 14px}.kup-axis legend{font-size:11px;color:var(--soluk)}.kup-axis label{min-height:32px;display:flex;align-items:center;gap:4px}.kup-axis input,.kup-check input{accent-color:var(--vurgu)}
.kup-check{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.5;min-height:36px;margin-block:4px}
.kup-playback{border-top:1px solid var(--cizgi);margin-top:18px;padding-top:15px}.kup-playback>div{display:flex;flex-wrap:wrap;gap:5px}.kup-playback button{min-height:40px;padding:7px 10px;font-size:12px}.kup-playback p,.kup-note{font-size:11px;color:var(--soluk);line-height:1.6}
.kup-legend{margin-top:18px;border-top:1px solid var(--cizgi);padding-top:8px}.kup-legend p{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:7px;font-size:11px;line-height:1.5}.kup-legend i{width:8px;height:8px;border-radius:50%;margin-top:4px}.kup-legend b{font-variant-numeric:tabular-nums;white-space:nowrap}
.kup-stage{min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:16px;padding:18px;align-items:stretch}
.kup-volume-view{display:flex;flex-direction:column;min-height:0;min-width:0;height:100%;overflow:hidden}.kup-viewport{position:relative;height:min(520px,calc(100dvh - 270px));min-height:0;flex:1 1 0;background:transparent;overflow:hidden}.kup-viewport canvas{display:block;width:100%;height:100%;touch-action:none}
.kup-camera{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding-top:10px;flex:0 0 auto}.kup-camera button{min-height:38px;padding:7px 10px;font-size:11px}
.kup-section-view{min-width:0;min-height:0;overflow:auto;border-left:1px solid var(--cizgi);padding-left:16px;display:flex;flex-direction:column;align-items:stretch}.kup-section-view header{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:14px;flex:0 0 auto}.kup-section-view h3{font-size:14px;margin:0}.kup-section-view header button{min-height:40px;font-size:11px}.kup-section-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;flex:0 0 auto}.kup-section-tools .kup-field{margin:0}.kup-section-tools .kup-check{grid-column:1/-1;margin:0}.kup-section-view canvas{display:block;width:100%;height:auto;aspect-ratio:1;max-height:calc(100dvh - 450px);object-fit:contain;border:1px solid var(--cizgi);margin-top:12px;flex:0 1 auto;min-height:120px}.kup-section-caption{font-size:10px;line-height:1.5;margin-bottom:0}
.kup-foot{font-size:10px;color:var(--soluk);line-height:1.5;padding:10px 24px;border-top:1px solid var(--cizgi);flex-shrink:0}
.kup-source{color:var(--vurgu);font-size:12px}.kup-atom-description{line-height:1.65}
.kup-dialog:has([data-kup-scale] option[value=atomic]:checked) .kup-stage{grid-template-columns:1fr}
.kup-no-webgl .kup-stage{grid-template-columns:1fr}.kup-no-webgl .kup-volume-view{display:none}.kup-no-webgl .kup-section-view{border-left:0;padding-left:0;max-width:750px;margin:auto}
.kup-dialog [hidden],.kup-dock[hidden]{display:none!important}.kup-dialog :focus-visible,.kup-dock:focus-visible,.kup-entry :focus-visible{outline:3px solid var(--vurgu);outline-offset:3px}
@media(min-width:901px) and (max-width:1100px){.kup-workspace{grid-template-columns:210px 1fr}.kup-stage{gap:10px;padding:12px;grid-template-columns:minmax(0,1fr) minmax(220px,.9fr)}.kup-section-view{padding-left:10px}.kup-camera button{padding-inline:8px;font-size:10px}}
@media(max-width:900px){.kup-workspace{grid-template-columns:220px 1fr}.kup-stage{overflow:auto;grid-template-columns:1fr;align-content:start}.kup-volume-view{height:auto;min-height:330px;overflow:visible}.kup-viewport{height:300px;min-height:300px;flex:none}.kup-section-view{overflow:visible;border-left:0;border-top:1px solid var(--cizgi);padding:18px 0 0}.kup-section-view canvas{max-width:650px;max-height:none;margin-inline:auto}}
@media(max-width:700px){.kup-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);border-radius:12px}.kup-head{padding:12px;gap:10px}.kup-head h2{font-size:22px}.kup-head button{font-size:11px;padding:8px 10px}.kup-live{padding:8px 12px;font-size:11px}.kup-workspace{display:block;overflow:auto}.kup-controls{border-right:0;border-bottom:1px solid var(--cizgi);overflow:visible;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.kup-controls>div:not(.kup-point){grid-column:1/-1}.kup-point{grid-column:1/-1;margin:0}.kup-controls .kup-field{margin:0}.kup-controls [data-kup-volume-controls]{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kup-axis{margin:0}.kup-playback{margin:0}.kup-playback .kup-field{margin-bottom:8px}.kup-legend{display:none}.kup-stage{overflow:visible;padding:12px}.kup-viewport{height:300px}.kup-foot{padding:8px 12px}.kup-dock{width:104px;left:8px;bottom:8px}.kup-dock-preview{width:100px;height:90px}}
@media(prefers-reduced-motion:no-preference){.kup-dock-preview svg{animation:kup-drift 5s ease-in-out infinite}@keyframes kup-drift{50%{transform:translateY(-5px)}}}
@media(max-width:700px){.kup-dock{width:132px}.kup-dock-preview{width:124px;height:112px}}
/* Guided atomic lesson */
.kup-lesson-steps{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 14px}
.kup-lesson-steps button{flex:1 1 auto;min-height:36px;padding:6px 8px;font-size:11px;border:1px solid var(--cizgi);background:var(--yuzey);color:var(--metin);border-radius:5px;white-space:nowrap}
.kup-lesson-steps button[aria-pressed=true]{background:var(--metin);color:var(--bg);border-color:var(--metin)}
.kup-dialog:has([data-kup-scale] option[value=atomic]:checked) .kup-stage:has(.kup-lesson-card:not([hidden])){grid-template-columns:minmax(0,1fr) minmax(280px,360px)}
.kup-lesson-card{min-width:0;min-height:0;overflow:auto;border-left:1px solid var(--cizgi);padding:2px 2px 2px 18px;font-size:13px;line-height:1.6}
.kup-lesson-card h3{font-size:20px;line-height:1.25;margin:6px 0 10px}
.kup-lesson-body{color:var(--metin);margin:10px 0}
.kup-badges{display:flex;flex-wrap:wrap;gap:6px}
.kup-badge{font:600 10px ui-monospace,monospace;letter-spacing:.03em;padding:3px 7px;border:1px solid var(--cizgi);border-radius:20px;color:var(--soluk)}
.kup-badge-calculated{border-color:var(--vurgu);color:var(--vurgu)}
.kup-facts{display:grid;gap:8px;border-top:1px solid var(--cizgi);padding-top:12px;color:var(--soluk)}
.kup-formula{font:600 13px/1.5 ui-monospace,monospace;color:var(--metin)}
.kup-lesson-chip{display:flex;align-items:center;gap:8px;font-size:12px}
.kup-lesson-chip i{width:12px;height:12px;border-radius:50%;flex:0 0 auto;border:1px solid #0003}
.kup-compare{width:100%;border-collapse:collapse;font-size:12px}
.kup-compare th,.kup-compare td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--cizgi);vertical-align:top}
.kup-compare td{font:600 12px ui-monospace,monospace;color:var(--metin);white-space:nowrap}
.kup-conclusion{color:var(--metin);font-weight:600}
.kup-lesson-nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.kup-lesson-nav button{min-height:40px;padding:8px 12px}
@media(max-width:900px){.kup-dialog:has([data-kup-scale] option[value=atomic]:checked) .kup-stage:has(.kup-lesson-card:not([hidden])){grid-template-columns:1fr}.kup-lesson-card{border-left:0;border-top:1px solid var(--cizgi);padding:14px 0 0}}