@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html { min-width: 320px; }

* { box-sizing: border-box; }

p {margin:0px;padding:0px;}


:root{
  --container-max: 1180px; 
  --header-bg: #d60000;
  --header-height: 46px;
  --text: #ffffff;
  --text-dim: rgba(255,255,255,0.85);
  --dex:#00a2c3;
  --peek:#808080; }

[data-theme="dark"]{
      color-scheme: dark;
      --bg:#0f1115; --card:#121722; --fg:#e6e9ef; --muted:#c4cbd5;
      --brand:#12b4e6; --brand-ink:#03222d; --line:#1f2633; --hover:#171d28;
      --green:#16d19a; --red:#ff6b6b; 
      --svg:#00a1c2;
      --icon-color:%2300a1c2;         }
      
[data-theme="light"]{
      color-scheme: light;
      --bg:#f6f7fb; --card:#ffffff; --fg:#0b1020; --muted:#61708a;
      --brand:#12b4e6; --brand-ink:#03222d; --line:#e6e9f0; --hover:#f1f3f8;
      --shadow:0 8px 24px rgba(16,24,40,.08);
      --green:#0bb07a; --red:#d94545; 
      --svg:#0f1115;
      --icon-color:%230f1115;   }

body {
  font-family: 'Kanit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  font-size: 16px;
  line-height: 1.5;
 background: 
        radial-gradient(60% 40% at 30% 10%, rgba(59, 130, 246, .25), transparent 60%),
        radial-gradient(40% 40% at 80% 20%, rgba(34, 211, 238, .25), transparent 50%),
        radial-gradient(40% 60% at 60% 70%, rgba(168, 85, 247, .25), transparent 60%),
        linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 30%, transparent);
    background-color: var(--bg);
    background-attachment: fixed;
	
	
	
	color:var(--fg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}


#firefly-layer{ position: fixed; inset: 0; pointer-events: none;  z-index: 0;  }
.firefly{ position: fixed; width: 9px; height: 9px; 
    border-radius: 50%; background: rgba(0, 162, 195, .85);
    box-shadow: 0 0 10px rgba(0, 162, 195, .7), 0 0 22px rgba(128, 128, 128, .35);
    opacity: 0; transform: translate3d(0,0,0) scale(0.125); /* start ~1px */
    transition-property: opacity, transform;
    transition-timing-function: ease;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 6px rgba(255,236,190,.6));  }
  .firefly.visible {    animation: pulse 4s ease-in-out infinite alternate;  }
@keyframes pulse {
    from { filter: drop-shadow(0 0 6px rgba(255,236,190,.5)); }
    to   { filter: drop-shadow(0 0 20px rgba(255,236,190,.9)); }  }



.dex {color:var(--dex);}
.peek {color:var(--peek);}


.container { max-width: var(--container-max); margin-inline: auto;  }


/* Header */
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(1.2) blur(8px);background: color-mix(in oklab, var(--bg) 75%, transparent);border-bottom:1px solid var(--line);}

.site-header .container{   height: var(--header-height); display: flex; align-items: center; justify-content: space-between;}

.header-left{flex-basis:160px; display: flex; align-items:center;  justify-content:flex-start; padding-left: 4px;}

.logo-icon{height:26px;display:block;}
.logo-icon img {display:flex;}

.logo-full{height:26px;display:none;}
.logo-full img {display:flex;}

.header-center {flex-grow: 1;flex-shrink: 1;display: flex;align-items: center;justify-content: center;}

.header-right {flex-basis:130px;display: flex;gap:6px;align-items:center; justify-content:flex-end; padding-right: 4px;}

.header-btn {display:flex;flex-basis:36px;align-items: center;justify-content: center;background-color:var(--bg);border-radius:6px;overflow:hidden;cursor:pointer;padding:4px 0;border:1px solid var(--line);transition:0.3s;}
.header-btn:hover {background-color:var(--line);}
.header-btn svg {height: 24px;width: 24px;fill: var(--svg);display: flex;}



/* Nav */
.nav ul{ display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0;}
.nav ul li {   padding: 4px 8px;transition:0.3s;border-radius:6px;border:1px solid var(--line);}
.nav ul li:hover {background-color:var(--line);}

.nav a{ color: var(--text-dim); text-decoration: none; font-weight: 400; font-size: 1em; padding: 6px 0;}
.nav a:hover, .nav a:focus{  color: var(--text);}
.nav-toggle{ display: none; flex-basis: 36px; align-items: center; justify-content: center; background-color: var(--bg); border-radius: 6px; overflow: hidden;     
  cursor: pointer; padding: 3px 0;  border: 1px solid var(--line); transition: 0.3s; gap: 0;   }
.nav-toggle .bar{ display: block; width: 22px; height: 2px; background: var(--peek); margin: 5px auto; border-radius: 1px; transition: transform .2s ease, opacity .2s ease, background .2s ease; transform-origin: center;}
.nav-toggle.is-open .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .bar:nth-child(2){ opacity: 0; }
.nav-toggle.is-open .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}
.nav-toggle:hover, .nav-toggle:focus-visible{ border-color: var(--line);}
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}


@media (prefers-reduced-motion: reduce){
  .nav-toggle, .nav-toggle .bar{ transition: none !important; } }




/* === Popup Panel (hidden by default) === */
.popup {
  position: fixed;
  top: calc(var(--header-height) + 1px);
  right: max(4px, calc((100vw - 1172px) / 2));
  width: 320px;
  max-width: 100%;
  height: 0;
  overflow: hidden;
  background-color: var(--bg);
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  opacity: 0;
  transform: translateY(-20px);
  transition:
    height .15s ease,
    opacity .15s ease,
    transform .15s ease;
  z-index: 999;}

/* When active */
.popup.open {
  height: 300px; /* or whatever fits your menu */
  opacity: 1;
  transform: translateY(0);}



section {padding: 16px;}
.slide {  display: flex;  gap: 24px; align-items: center;position: relative;}
.slide-title  {    flex-grow: 1;}
.slide-title  h1 {display:flex;}
.slide-title h1 i { width: 42px; height: 42px; display:flex;}
.slide-title .box-ico {display:inline-flex;flex-basis:46px;margin-top: 2px;}
.slide-title .box-title {flex-grow:1;padding-left:3px;}

.slide .play-slideshow i {width: 42px; height: 42px;}

.slide-excerpt { color: var(--muted); line-height:1.3em;}
.slide-visual { flex-basis: 380px;  flex-shrink: 0; position: relative; aspect-ratio: 16 / 10; overflow: hidden;}
.slide-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;}

.slide-visual-skeleton {
  position: absolute;
  inset: 0;
  animation: shimmer 1.2s infinite linear;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0.06) 0%,
      rgba(0,0,0,0.12) 50%,
      rgba(0,0,0,0.06) 100%);
  background-size: 200% 100%;
}
@keyframes shimmer { to { background-position-x: -200%; } }


.grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 0;}

.grid-visual { border: 1px solid var(--border); background: rgba(255, 255, 255, .06); border-radius: 18px; padding: 18px;transition:0.4s;}
.grid-visual:hover {  transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .25);background: rgba(0, 0, 0, .16);}

.reveal { opacity: 0; transform: translateY(6px); transition: all .5s ease;}
.reveal.show { opacity: 1; transform: none;}


.grid-visual.active { background: rgba(0, 0, 0, .16);  }
.play-slideshow { cursor: pointer;opacity: 0.6;transition: opacity 0.3s;z-index: 10;  }
.play-slideshow:hover { opacity: 1;  }


.grid-image{margin:0 auto;}
.grid-image img {width:100%;}
.grid-title {font-weight:600;color: var(--dex);}
.grid-excerpt {color: var(--muted); line-height:1.3em;}

.core-box {text-align:center;margin:0 auto;}
.core-title {font-weight:600;color: var(--dex);font-size:2em;}
.core-excerpt {color: var(--muted); line-height:1.3em;}


#informer {padding: 16px;  background: color-mix(in oklab, var(--bg) 75%, transparent);
 border-top: 1px solid var(--line);   border-bottom: 1px solid var(--line);}  

h1 {margin: 0px 0px 10px 0;padding: 0px;line-height: 1.4em;color: var(--dex);}
h3 {margin: 0px 0px 10px 0;padding: 0px;line-height: 1.1em;color: var(--dex);display:flex;}
  
.grid-excerpt  {      color: var(--muted);line-height:1.2em;}

.grid-title i { width: 16px; height: 16px;}
.grid-title .box-ico {display:inline-flex;flex-basis:20px;margin-top: 2px;}
.grid-title .box-title {flex-grow:1;padding-left:3px;}


@media (max-width: 900px) {
 .grid { grid-template-columns: repeat(2, minmax(0, 1fr));   }}


@media (max-width: 580px) {
.slide { flex-direction: column;gap: 0px; align-items: stretch;  }
.slide-title, .slide-visual { flex: none;   width: 100%;  }


.grid { grid-template-columns: repeat(1, minmax(0, 1fr));   }}




/* Responsive */

@media (min-width: 380px){ .logo-icon{display:none;} .logo-full{display:block;} }


@media (max-width: 780px){
.header-left{flex-basis:50px;}
.header-center {justify-content:flex-end;}


  .nav-toggle{ display: inline-block; }

  .nav{
    position: absolute;
    top: calc(var(--header-height) + 2px);
    left: 0; right: 0;
    background: var(--bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav ul{
    flex-direction: column;
    align-items: flex-start;
    gap: 0;  }
    
  .nav li{ width: 100%;         text-align: center;}
  .nav a{
    display: block;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  /* Expanded */
  .nav[data-open="true"]{ max-height: 60vh; }
}