:root{
  --page-max: 1400px;
  --font-ui: "Noto Serif", Georgia, "Times New Roman", serif;
  
  --font-ui-menu: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 
  --card-h1-size: clamp(34px, 3vw, 40px);
  --card-h2-size: clamp(26px, 3vw, 32px);
  --card-p-size: clamp(16px, 3vw, 20px);     
  
  

  
  
  
   
  --bg-page:               #292929;         
  --color-primary:         #cfcfcf;         
  --tone-dim-secondary: 40%;                  
  --color-h1:              #bebebe;         
  --hero-text:             #cfcfcf;         
  --scroll-accent:         #b1b1b1;

    
  
  
  

  
  --tone-dim-h2:        10%;           
  --tone-dim-p:         5%;            
  --tone-elev-1:        0%;            
  --tone-elev-2:        10%;           
  --tone-color-accent:  70%;          

  
  


  
  

  
  --hdr-bg-on:#292929;
  --hdr-shadow-on: 0 0 12px 6px #191919;

  
  --gap:        clamp(25px, 3vw, 30px);
  --pad-card:   clamp(16px, 2.4vw, 24px);
  --img-pad:    15px;
  --img-radius: 15px;
  --card-radius: clamp(20px, 2vw, 28px);
  --shadow-1:
    -4px -4px 12px -5px rgba(255, 255, 255, 0.15), 
    4px  4px 20px -6px rgba(0,0,0,.5), 
    inset 2px  2px 5px -5px rgba(0, 0, 0, 0.267),
    inset -2px -2px 5px -5px rgba(255, 255, 255, 0.15);
  --shadow-2: 0 12px 30px rgba(0,0,0,.45);

  
  --glass-blur: 20px;
  --glass-bg:  color-mix(in srgb, #292929 65%, transparent);
  --glass-bd:  color-mix(in srgb, #ffffff 12%, transparent);
  --padding-block: clamp(0px, 1vw, 10px) 20px;
}




body {
  
  
  
  font-variant-numeric: tabular-nums; 
  text-rendering: optimizeLegibility;
}
  










html[data-theme="light"]{

  --bg-page-light:         #eeeeee;                   
  --color-primary-light:   #474747;                 
  --color-h1-light:        #474747;                 

  --bg-page: var(--bg-page-light);                      
  --color-primary: var(--color-primary-light);        

  
  --color-h1: var(--color-h1-light);                  

  --glow-color: rgba(0,0,0,.18);

  --hdr-bg-on:#FFFFFF;
  --hdr-shadow-on: 0 8px 24px rgba(0,0,0,.12);

  
  --glass-bg:  color-mix(in srgb, #ffffff 65%, transparent);
  --glass-bd:  color-mix(in srgb, #000000 30%, transparent);
}




:root{
  --bg-elev-1:        color-mix(in oklch, var(--bg-page), black var(--tone-elev-1));    
  --bg-elev-2:        color-mix(in oklch, var(--bg-page), black var(--tone-elev-2));    
  --color-secondary:  color-mix(in oklch, var(--color-primary), black var(--tone-dim-secondary));
  --color-h2:         color-mix(in oklch, var(--color-h1),black var(--tone-dim-h2)); 
  --color-p:          color-mix(in oklch, var(--color-h1), black var(--tone-dim-p)); 
  --color-accent:     color-mix(in oklch, var(--color-primary), black var(--tone-color-accent)); 
  --color-scroll-accent:     color-mix(in oklch, var(--scroll-accent), black var(--tone-color-accent)); 
  
}



html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg-page);
  
}





:root{
  
  --theme-xfade: 500ms;
}


html.theme-fade,
html.theme-fade *{
  transition:
    color            var(--theme-xfade) ease,
    background-color var(--theme-xfade) ease,
    border-color     var(--theme-xfade) ease,
    box-shadow       var(--theme-xfade) ease,
    text-shadow      var(--theme-xfade) ease,
    filter           var(--theme-xfade) ease;
}




:root{
  
  
  
  --hero-stroke:      rgba(0,0,0,.0);          
  --hero-stroke-w:    0px;                    
  --hero-glow-color:  rgba(0,0,0,.0);          
  --hero-glow-r:      0px;                     
}


html[data-theme="dark"]{
  --hero-text:       var(--color-primary,   #e3fc00);
  --hero-text-muted: color-mix(in oklch, var(--hero-text), black 20%);
  --hero-stroke:     rgba(0,0,0,.0);
  --hero-glow-color: rgba(0,0,0,.0);
}


html[data-theme="light"]{

  --hero-text-muted: color-mix(in oklch, var(--hero-text), black 50%);   
  --hero-stroke:     rgba(0,0,0,.0);        
  --hero-glow-color: rgba(0,0,0,.0);
}


.card{
  position: relative;
  min-width:0;
  width: 320px;
  border-radius: var(--card-radius);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-align:center;

  
  background: var(--bg-elev-1, var(--bg-page));
  border: var(--card-bd, 0 solid transparent);
  box-shadow: var(--card-shadow, var(--shadow-1));
  backdrop-filter: var(--card-backdrop, none);
  align-content: stretch;
}



  .card__content{padding: var(--pad-card);padding-top: 6px;}
  .card__h2{
    margin:0 0 20px; font-size: var(--card-h2-size);
    font-weight:700; line-height:1.25; color: var(--color-h2);
  }
  .card__p{
    margin:0;
    font-size: var(--card-p-size);
    line-height: 1.55;
    color: var(--color-p);
}


  .card__media{ padding: var(--img-pad); box-sizing: border-box; }
  .media-frame{
    position:relative;
    width:100%;
    aspect-ratio:
    var(--img-ratio);
    overflow:hidden;
    border-radius: calc(var(--card-radius) - var(--img-pad));
  }
  .media-frame > img{
    position:absolute;
    inset:0; width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}



.block__title{
  margin: 0;
  font-size: var(--card-h1-size);
  font-weight: 600;
  color: var(--color-h1);
}


.block__lead{
  margin: 10px 16px 28px;
  text-align: center;
  font-size: clamp(16px, 3vw, 24px);  
  
  color: var(--color-h2);
  line-height: 1.55;  
}



@media (prefers-reduced-motion: reduce){
  html.theme-fade, html.theme-fade *{ transition:none !important; }
}





.toolbar {
  position: sticky;         
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px); 
  -webkit-backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.toolbar__inner {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
}
.toolbar__left,
.toolbar__right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar .btn {
  padding: 8px 12px;
}



.card--clickable {
  position: relative;
  overflow: hidden;
}
.card--clickable .card-link {
  position: absolute;
  inset: 0;                 
  z-index: 1;               
  text-indent: -9999px;     
  background: transparent;
}
.card--clickable .card__content, 
.card--clickable img.cover {
  position: relative;
  z-index: 0;
}

.card--clickable:hover {
  transform: translateY(-1px);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 16%, transparent);
}
.card--dim {                 
  opacity: .5;
  filter: saturate(.7);
  transition: opacity .15s ease, filter .15s ease;
}


.card__controls {
  position: absolute;
  z-index: 2;               
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}




  



.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, var(--color-bg) 40%, rgba(0,0,0,.35));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none; 
  align-items: center; justify-content: center;
  padding: 16px;
}
.modal-backdrop.is-open { display: flex; }

.modal {
  width: min(560px, 100%);
  background: var(--card-bg, #0f1116);
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
  border-radius: 14px;
  box-shadow: 0 10px 32px color-mix(in srgb, var(--color-primary) 24%, transparent);
}
.modal__head, .modal__body, .modal__foot { padding: 14px 16px; }
.modal__head { display:flex; justify-content: space-between; align-items:center; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent); }
.modal__foot { border-top: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.modal__title { margin:0; font-size: 1.1rem; }
.modal__close { border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent); border-radius:10px; padding:6px 10px; cursor:pointer; background:transparent; }
.modal__row { display:flex; gap:10px; flex-wrap:wrap; align-items: end; margin: 8px 0; }
.modal__row label { display:block; }
.modal__result { margin-top:8px; font-size: 12px; word-break: break-all; }




.login-card {
  max-width: 360px;
  margin: 80px auto;
  padding: 30px 36px;
  background: var(--card-bg, #1e1e1e);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0,0,0,.25);
  text-align: center;
}

.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-desc {
  font-size: 14px;
  color: var(--muted, #9aa0a6);
  margin-bottom: 24px;
}


.input-wrap {
  position: relative;
  margin-bottom: 20px;
}
.input-wrap input {
  width: 100%;
  padding: 10px 36px 10px 12px;
  font-size: 15px;
  border: 1px solid var(--border, #444);
  border-radius: 8px;
  background: var(--input-bg, #2a2a2a);
  color: var(--text, #fff);
}
.input-wrap input:focus {
  outline: none;
  border-color: var(--accent, #666);
}


.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.clear-btn::before {
  content: "✕";
  font-size: 14px;
  color: var(--muted, #aaa);
}
.clear-btn.show {
  opacity: 0.6;
  pointer-events: auto;
}
.clear-btn.show:hover::before {
  color: var(--accent, #fff);
  opacity: 1;
}


.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--border, #444);
  border-radius: 10px;
  background: var(--btn-bg, #2a2a2a);
  color: var(--text, #fff);
  font-weight: 600;
  transition: all .15s ease;
}
.btn:hover {
  background: var(--btn-hover, #3a3a3a);
}
.btn-primary {
  background: var(--accent, #444);
  border-color: var(--accent, #444);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--color-primary, #fff) 10%, transparent); 
}
.w-full {
  width: 100%;
}


input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:autofill,
input:autofill:hover,
input:autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px color-mix(in srgb, var(--glass-bg), #fff 94%) inset !important;

  
  box-shadow: 0 0 0px 1000px var(--glass-bg, rgba(30,30,30,.75)) inset !important;
  -webkit-text-fill-color: var(--color-primary, #ddd) !important;
  caret-color: var(--color-primary, #ddd);
  transition: background-color 9999s ease-in-out 0s;
}


.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  
  -webkit-box-shadow: 0 0 0 1000px color-mix(in srgb, var(--glass-bg, rgba(30,30,30,.75)), #ffffff 6%) inset !important;
  box-shadow:         0 0 0 1000px color-mix(in srgb, var(--glass-bg, rgba(30,30,30,.75)), #ffffff 6%) inset !important;
  -webkit-text-fill-color: var(--color-primary, #ddd) !important;
  caret-color: var(--color-primary, #ddd);
  border-radius: 12px;                    
  transition: background-color 9999s ease-in-out 0s !important; 
}

.login-card input:autofill,
.login-card input:autofill:hover,
.login-card input:autofill:focus {
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--glass-bg, rgba(30,30,30,.75)), #ffffff 6%) inset !important;
  -webkit-text-fill-color: var(--color-primary, #ddd) !important;
  caret-color: var(--color-primary, #ddd);
  border-radius: 12px;
}






.icon--solid use,
.icon--solid path,
.icon--solid rect,
.icon--solid circle,
.icon--solid polygon { fill: var(--color-primary); stroke: none; }


.icon--stroke use,
.icon--stroke path,
.icon--stroke line,
.icon--stroke polyline,
.icon--stroke rect,
.icon--stroke circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 40;              
  stroke-linecap: round;
  stroke-linejoin: round;
}





:root {
  --ico: 26px;          
  --ico-stroke: 26;     
}


.ico {
  display: block;
  width: var(--ico);
  height: var(--ico);
       
  flex-shrink: 0;
}


.icon--solid :is(use, path, rect, circle, polygon) {
  fill: currentColor;
  stroke: none;
}


.icon--stroke :is(use, path, line, polyline, rect, circle, polygon) {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: var(--ico-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}


.ico--16 { --ico: 16px; }
.ico--18 { --ico: 18px; }
.ico--20 { --ico: 20px; }
.ico--24 { --ico: 24px; }
.ico--28 { --ico: 28px; }
.ico--32 { --ico: 32px; }
.ico--40 { --ico: 40px; }


.stroke--40 { --ico-stroke: 40; }
.stroke--60 { --ico-stroke: 60; }
.stroke--80 { --ico-stroke: 80; }
.stroke--100{ --ico-stroke: 100; }





.dash__divider--horizontal {
  position: relative;
  height: 1px;
  width: 100%;
  margin: clamp(20px, 4vw, 28px) 0;
  pointer-events: none;
}

.dash__divider--horizontal.dash__divider--nav {
  margin: clamp(6px, 4vw, 10px) 0;
}

.dash__divider--horizontal::before {
  content: "";
  position: absolute;
  left: 1%;
  right: 1%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 70%, transparent) 50%,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 100%
  );
  opacity: 0.7;
}


.block__divider {
  position: relative;
  height: 1px;
  max-width: var(--page-max);
  pointer-events: none;
}

.block__divider--top{
  margin: clamp(16px, 4vw, 50px) auto 6px auto;
}

.block__divider--bottom{
  margin: 16px auto clamp(8px, 4vw, 28px) auto;
}

.block__divider::before {
  content: "";
  position: absolute;
  left: 1%;
  right: 1%;
  top: 0;
  height: 1px;

  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 70%, transparent) 50%,
    color-mix(in srgb, var(--color-primary) 0%, transparent) 100%
  );
  opacity: 0.7;
}





#demo-pano,
#demo-inter,
#demo-cabinet {
  scroll-margin-top: clamp(120px, 18vh, 300px);
}


.ext-mark{
  display: inline-block;            
  margin-left: 0.35em;              
  transform: translateY(-0.18em);   
  opacity: 0.55;                    
  font-size: 0.9em;                 
  line-height: 1;                   
  pointer-events: none;             
}


a[data-external-mark="1"]::after{
  content: " ⤴";                  
  display: inline-block;          
  margin-left: 0.25em;
  transform: translateY(-0.18em); 
  opacity: 0.55;                  
  font-size: 0.9em;               
  line-height: 1;
  pointer-events: none;           
}