/* The upscaler is an illustrative timelapse; Telegram is the live product link. */
.upscale-demo{width:min(100%,380px);padding:10px;background:#101013;border:1px solid var(--line);border-radius:34px;box-shadow:0 35px 90px #0006}
.upscale-shell{overflow:hidden;border:1px solid var(--line-soft);border-radius:25px;background:#0a0a0c}
.upscale-head{display:flex;align-items:center;gap:11px;height:44px;padding:0 16px;border-bottom:1px solid var(--line-soft)}
.upscale-head>b{font-size:17px;letter-spacing:-.03em}
.upscale-head>span{font:8px var(--font-mono);letter-spacing:.12em;color:var(--muted);padding-left:11px;border-left:1px solid var(--line)}
.upscale-head button{margin-left:auto;padding:5px 9px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;font-size:10px;cursor:pointer}
.upscale-head button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.upscale-stage{height:350px;position:relative;isolation:isolate}
.upscale-screen{position:absolute;inset:0;padding:16px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s cubic-bezier(.23,1,.32,1),transform .25s cubic-bezier(.23,1,.32,1),visibility .25s;pointer-events:none}
.upscale-demo[data-scene="upload"] .upscale-upload,.upscale-demo[data-scene="settings"] .upscale-settings,.upscale-demo[data-scene="processing"] .upscale-processing,.upscale-demo[data-scene="result"] .upscale-result{opacity:1;visibility:visible;transform:translateY(0)}
.upscale-files-label{position:absolute;top:15px;left:16px;color:var(--faint);font:8px var(--font-mono);letter-spacing:.1em}
.upscale-file{position:absolute;left:16px;top:34px;display:flex;align-items:center;gap:9px;padding:9px 12px;background:#24242d;border:1px solid #494955;border-radius:10px;box-shadow:0 7px 20px #0005;z-index:3;transform-origin:center}
.upscale-file>i{font-size:26px;color:var(--accent)}
.upscale-file b{display:block;font-size:12px;font-weight:500}
.upscale-file small{display:block;font:7px var(--font-mono);letter-spacing:.1em;color:var(--muted);margin-top:2px}
.upscale-drop{position:absolute;top:102px;left:16px;right:16px;height:140px;border:1.5px dashed #9ba4ff66;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:background .2s,border-color .2s}
.upscale-drop>i{font-size:29px;color:var(--accent);margin-bottom:8px}
.upscale-drop>b{font-size:17px;letter-spacing:-.025em}
.upscale-drop>small{font-size:12px;color:var(--muted);margin-top:5px}
.upscale-drop-hint{position:absolute;bottom:8px;color:var(--accent);font:8px var(--font-mono);opacity:0;transition:opacity .16s}
.upscale-demo.is-dragging .upscale-drop{border-color:var(--accent);background:var(--accent-soft)}
.upscale-demo.is-dragging .upscale-drop-hint{opacity:1}
.upscale-demo.is-uploaded .upscale-drop{border-style:solid;border-color:#9ba4ff4d;background:#9ba4ff08}
.upscale-models{position:absolute;left:16px;right:16px;bottom:18px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.upscale-model{position:relative;padding:12px;border:1px solid var(--line);border-radius:13px;transition:background .2s,border-color .2s}
.upscale-model b{font-size:14px}.upscale-model small{display:block;color:var(--muted);font-size:10px;margin-top:4px}
.upscale-model>i{position:absolute;right:9px;top:13px;font-size:13px;color:var(--accent);opacity:0}
.upscale-model.is-selected{border-color:var(--accent);background:var(--accent-soft)}
.upscale-model.is-selected>i{opacity:1}
.upscale-settings{display:flex;flex-direction:column}
.upscale-settings-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:13px}
.upscale-settings-title>span{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}.upscale-settings-title i{color:var(--accent);font-size:17px}
.upscale-settings-title small{font:8px var(--font-mono);color:var(--faint)}
.upscale-selects{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:17px}
.upscale-field{position:relative;min-width:0}.upscale-field>span{display:block;margin-bottom:5px;font-size:11px;color:var(--muted)}
.upscale-select{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#131315;border:1px solid #2c2c32;border-radius:9px;font-size:12px}
.upscale-select b{font-weight:500}.upscale-select i{font-size:13px;color:var(--muted)}
.upscale-option{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#24242c;border:1px solid #9ba4ff66;border-radius:8px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;font-size:12px;box-shadow:0 5px 15px #0008;opacity:0;visibility:hidden;transform:translateY(-3px);transform-origin:top;transition:opacity .16s,transform .16s,visibility .16s;z-index:3}
.upscale-option.is-open{opacity:1;visibility:visible;transform:translateY(0)}.upscale-option i{color:var(--accent)}
.upscale-option.upscale-quality-options{display:block;padding:4px}
.upscale-quality-row{display:flex;align-items:center;justify-content:space-between;padding:6px;border-radius:5px}
.upscale-quality-row>i{opacity:0}.upscale-quality-row.is-selected>i{opacity:1}
.upscale-quality-row.is-target{background:var(--accent-soft);color:var(--accent)}
.upscale-sliders{display:grid;grid-template-columns:1fr 1fr;gap:13px 17px}
.upscale-slider>div{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:10px;margin-bottom:9px;white-space:nowrap}
.upscale-slider b{font:9px var(--font-mono);color:var(--muted);font-weight:400}
.upscale-track{position:relative;display:block;height:4px;margin:0 4px;background:#3c3c41;border:1px solid #606066;border-radius:10px}
.upscale-track::before{content:"";position:absolute;inset:0;background:#91b9ff;border-radius:inherit;transform:scaleX(var(--slider-position,0));transform-origin:left}
.upscale-track i{position:absolute;left:0;top:50%;width:10px;height:10px;border-radius:50%;background:#91b9ff;transform:translate(-50%,-50%)}
.upscale-slider-centered{--slider-position:.5}
.upscale-slider.is-target{color:var(--accent)}.upscale-slider.is-target .upscale-track i{outline:3px solid #9ba4ff33}
.upscale-action{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border:1px solid transparent;border-radius:10px;background:var(--text);color:#111114;font-size:13px;font-weight:500;transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s}
.upscale-action>i:last-child{margin-left:auto}.upscale-action>i:first-child{margin-right:auto}.upscale-action>i{font-size:16px}
.upscale-settings>.upscale-action{margin-top:auto;padding:0 12px}
.upscale-demo .upscale-action.is-target{background:#dfe2ff}.upscale-demo .upscale-action.is-pressed{transform:scale(.97)}
.upscale-processing,.upscale-result{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.upscale-progress-ring{position:relative;width:156px;height:156px;margin-bottom:17px}
.upscale-progress-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.upscale-progress-ring circle{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round}
.upscale-progress-ring .upscale-ring-track{stroke:#24242e;stroke-width:4}
#upscaleProgressArc{stroke-dasharray:100;stroke-dashoffset:100}
.upscale-progress-ring>div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.upscale-progress-ring b{font-size:38px;letter-spacing:-.06em;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.15}.upscale-progress-ring b>span{font-size:19px;letter-spacing:-.02em;color:var(--muted);margin-left:3px}
.upscale-progress-ring small{margin-top:8px;font:8px var(--font-mono);letter-spacing:.16em;color:var(--accent)}
.upscale-screen h3{font-size:20px;font-weight:500;letter-spacing:-.035em}.upscale-screen p{font-size:12px;color:var(--muted);margin-top:5px}
.upscale-process-file{display:flex;align-items:center;gap:7px;align-self:stretch;margin:23px 10px 0;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.upscale-process-file>i{font-size:17px;color:var(--accent)}.upscale-process-file>span{margin-left:auto;font:8px var(--font-mono);color:var(--faint)}
.upscale-complete{display:grid;place-items:center;width:57px;height:57px;border:1px solid #9ba4ff55;background:var(--accent-soft);border-radius:50%;color:var(--accent);font-size:28px;margin-bottom:17px}
.upscale-result-file{align-self:stretch;display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:#141417;border-radius:12px;padding:15px 12px;margin:23px 0 12px;text-align:left}
.upscale-result-file>i:first-child{font-size:28px;color:var(--accent)}.upscale-result-file b{font-size:13px;font-weight:500;display:block}.upscale-result-file small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.upscale-result-file>i:last-child{margin-left:auto;color:var(--accent);font-size:16px}
.upscale-result .upscale-action{align-self:stretch;padding:0 12px}
.upscale-footer{border-top:1px solid var(--line-soft);padding:10px 16px 16px}
.upscale-footer p{font-size:10px;color:var(--muted);text-align:center;min-height:15px}
.upscale-footer .tg{justify-content:center;margin-top:9px;font-size:13px;padding:11px 12px}.upscale-footer .tg>i:last-child{margin-left:auto;font-size:14px}.upscale-footer .tg>i:first-child{margin-right:auto}
.upscale-cursor{position:absolute;top:0;left:0;z-index:6;pointer-events:none;width:27px;height:30px;filter:drop-shadow(0 2px 2px #0009);color:#fff}
.upscale-cursor>i{display:block;font-size:25px;-webkit-text-stroke:1px #17171b;transform-origin:4px 2px}
.upscale-cursor.is-dragging>i{transform:scale(.9)}
.upscale-click-ring{position:absolute;left:-10px;top:-12px;width:28px;height:28px;border:1.5px solid var(--accent);border-radius:50%;opacity:0}
@media(max-width:900px){
  .upscale-demo{width:min(100%,370px);padding:6px;border-radius:26px}.upscale-shell{border-radius:20px}
  .upscale-head{height:32px;padding:0 13px}.upscale-head>b{font-size:14px}.upscale-head button{padding:3px 8px;font-size:9px}
  .upscale-stage{height:clamp(245px,30dvh,300px)}.upscale-screen{padding:10px 13px}
  .upscale-files-label{top:9px;left:13px;font-size:7px}.upscale-file{left:13px;top:23px;padding:5px 10px}.upscale-file>i{font-size:22px}.upscale-file b{font-size:11px}.upscale-file small{font-size:6px}
  .upscale-drop{top:73px;height:calc(100% - 148px);left:13px;right:13px;border-radius:12px}.upscale-drop>i{font-size:21px;margin-bottom:3px}.upscale-drop>b{font-size:14px}.upscale-drop>small{font-size:10px;margin-top:2px}.upscale-drop-hint{bottom:4px;font-size:7px}
  .upscale-models{bottom:10px;left:13px;right:13px}.upscale-model{padding:8px 10px}.upscale-model b{font-size:12px}.upscale-model small{font-size:9px;margin-top:2px}.upscale-model>i{top:10px;font-size:11px}
  .upscale-settings-title{margin-bottom:6px}.upscale-settings-title>span{font-size:12px}.upscale-settings-title small{font-size:7px}
  .upscale-selects{margin-bottom:10px}.upscale-field>span{font-size:10px;margin-bottom:3px}.upscale-select{height:28px;font-size:11px}.upscale-option{padding:6px 10px;font-size:11px}
  .upscale-sliders{gap:8px 17px}.upscale-slider>div{font-size:9px;margin-bottom:6px}.upscale-track{height:3px}.upscale-track i{width:8px;height:8px}
  .upscale-action{min-height:30px;font-size:12px}.upscale-progress-ring{width:114px;height:114px;margin-bottom:10px}.upscale-progress-ring b{font-size:30px}.upscale-progress-ring small{font-size:7px}
  .upscale-screen h3{font-size:18px}.upscale-screen p{font-size:11px}.upscale-process-file{margin-top:15px;padding-top:10px}
  .upscale-complete{width:43px;height:43px;font-size:23px;margin-bottom:10px}.upscale-result-file{padding:10px 12px;margin-top:15px}
  .upscale-footer{padding:7px 13px 10px}.upscale-footer p{font-size:9px;min-height:13px}.upscale-footer .tg{padding:8px 11px;margin-top:6px;font-size:12px}
}
@media(max-width:900px) and (max-height:760px){.upscale-demo{scale:.85}}
@media(max-width:900px) and (max-height:680px){.upscale-demo{scale:.78}}
body.flow .upscale-demo{scale:1}
@media(prefers-reduced-motion:reduce){.upscale-screen,.upscale-option,.upscale-action,.upscale-model{transition:none;transform:none}.upscale-cursor{display:none}}
