html,body{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
-webkit-font-smoothing:antialiased;
}

body{
background:#fff;
color:#000;
}

.scroll{
position:fixed;
inset:0;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
}

.scroll::-webkit-scrollbar{
display:none;
}

.tenet{
position:fixed;
top:18px;
right:22px;
z-index:9999;
font-size:clamp(20px,2.2vw,34px);
font-weight:700;
letter-spacing:.16em;
line-height:1;
opacity:.92;
text-decoration:none!important;
color:inherit;
transition:color 180ms ease,opacity 180ms ease;
}

.tenet:hover{
color:rgba(90,90,90,1);
opacity:1;
}

.clock{
position:fixed;
top:18px;
left:22px;
z-index:9999;
font-size:13px;
opacity:.6;
letter-spacing:.08em;
}

.wrap{
max-width:1080px;
margin:0 auto;
padding:96px 18px 120px;
}

.note{
background:rgba(0,0,0,.04);
border:1px solid rgba(0,0,0,.08);
border-radius:28px;
padding:clamp(26px,4vw,44px);
margin-bottom:16px;
backdrop-filter:blur(10px);
}

.note p{
margin:0;
font-size:clamp(20px,2.1vw,31px);
line-height:1.22;
letter-spacing:-.025em;
color:rgba(0,0,0,.78);
white-space:pre-wrap;
}

.fade{
animation:fade 1.45s cubic-bezier(.22,1,.36,1);
}

@keyframes fade{
from{opacity:0;transform:translateY(8px);filter:blur(4px);}
to{opacity:1;transform:none;filter:none;}
}

.panel{
background:#1e1e1e;
border:1px solid #333;
border-radius:24px;
padding:22px;
margin-bottom:18px;
color:#fff;
}

.admin{
background:#111;
color:#fff;
}

.admin .tenet{
color:#fff;
font-weight:700;
}

.logout{
position:fixed;
bottom:18px;
right:18px;
z-index:9999;
background:#1e1e1e;
color:#fff;
border:1px solid #444;
padding:12px 18px;
border-radius:999px;
cursor:pointer;
}

input,textarea{
width:100%;
box-sizing:border-box;
background:#222;
border:1px solid #3a3a3a;
color:#fff;
padding:14px;
border-radius:14px;
margin-top:8px;
margin-bottom:18px;
font:inherit;
}

textarea{
min-height:180px;
resize:vertical;
}

button{
cursor:pointer;
font:inherit;
}

.primary{
width:100%;
background:#fff;
color:#000;
border:0;
padding:15px;
border-radius:999px;
}

.primary:active{
transform:scale(.985);
}

.row{
display:grid;
grid-template-columns:32px 1fr 42px;
gap:12px;
align-items:start;
background:#2b2b2b;
border:1px solid #3a3a3a;
padding:14px;
border-radius:18px;
margin-bottom:10px;
user-select:none;
-webkit-user-select:none;
transition:background 220ms ease,border-color 220ms ease,transform 220ms ease;
}

.row:hover{
background:#313131;
}

.delete{
background:transparent;
border:1px solid #555;
color:#fff;
border-radius:999px;
width:34px;
height:34px;
font-size:22px;
line-height:1;
}

.handle{
opacity:.45;
font-size:20px;
padding-top:2px;
cursor:grab;
touch-action:none;
user-select:none;
-webkit-user-select:none;
}

.row-actions{
display:flex;
flex-direction:column;
gap:8px;
opacity:0;
transition:opacity 180ms ease;
}

.row:hover .row-actions{
opacity:1;
}

.edit-btn{
width:34px;
height:34px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
line-height:1;
border:1px solid #555;
background:transparent;
color:#fff;
border-radius:999px;
}

.save-edit,.cancel-edit{
border:1px solid #555;
background:transparent;
color:#fff;
border-radius:999px;
padding:8px 12px;
font-size:12px;
}

.edit-area{
min-height:140px!important;
margin-top:0!important;
user-select:text;
-webkit-user-select:text;
}

.edit-actions{
display:flex;
gap:10px;
margin-top:12px;
}

.row.editing{
background:#363636;
border-color:#777;
}

.row.dragging-active{
opacity:.62!important;
transform:scale(.99);
border-color:#fff!important;
background:#3b3b3b!important;
cursor:grabbing;
}

.editable-text{
user-select:text;
-webkit-user-select:text;
}

.login{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(92vw,420px);
z-index:9999;
}

.admin .scroll{
pointer-events:none;
}

.admin .scroll.is-active{
pointer-events:auto;
}

.upload-trigger{
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px;
padding:14px 16px;
border:1px dashed #555;
border-radius:18px;
color:rgba(255,255,255,.72);
cursor:pointer;
transition:border-color 180ms ease,background 180ms ease;
}

.upload-trigger:hover{
border-color:#888;
background:rgba(255,255,255,.04);
}

.upload-icon{
font-size:20px;
line-height:1;
}

.preview-row{
display:flex;
gap:10px;
margin-bottom:16px;
overflow-x:auto;
scrollbar-width:none;
}

.preview-row::-webkit-scrollbar{
display:none;
}

.preview-image{
width:110px;
height:110px;
object-fit:cover;
border-radius:16px;
border:1px solid rgba(255,255,255,.12);
}

.slideshow{
display:flex;
gap:12px;
overflow-x:auto;
margin-top:18px;
scroll-snap-type:x mandatory;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}

.slideshow::-webkit-scrollbar{
display:none;
}

.slide{
min-width:min(82vw,720px);
scroll-snap-align:start;
}

.slide img{
width:100%;
height:auto;
display:block;
border-radius:22px;
background:#eee;
}

@media(max-width:620px){
.tenet{
top:14px;
right:16px;
font-size:20px;
letter-spacing:.14em;
}

.clock{
top:14px;
left:16px;
}

.logout{
bottom:12px;
right:12px;
}

.note p{
font-size:22px;
line-height:1.26;
}

.row-actions{
opacity:1;
}

.slide{
min-width:88vw;
}
}


/* v17 cinematic slideshow */
.slideshow,
.slide {
  all: unset;
}

.slideshow-single {
  position: relative;
  width: 100%;
  margin-top: 22px;
  overflow: hidden;
  border-radius: 24px;
}

.slide-single {
  display: none;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.slide-single.active {
  display: flex;
  animation: fadeSlide .45s ease;
}

.slide-single img {
  width: auto;
  max-width: 100%;
  max-height: min(72vh, 920px);
  object-fit: contain;
  display: block;
  border-radius: 24px;
  margin: 0 auto;
  background: #efefef;
}

.slide-next {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.slideshow-single:hover .slide-next {
  opacity: 1;
}

.slide-next:hover {
  background: rgba(0,0,0,.42);
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: scale(.992);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media(max-width:620px){
  .slide-single img {
    max-height: 68vh;
    border-radius: 20px;
  }

  .slide-next {
    opacity: 1;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }
}


/* v18 fixed-height slideshow stage, no rounded corners */
.slideshow-single {
  height: min(72vh, 820px) !important;
  min-height: min(72vh, 820px) !important;
  max-height: min(72vh, 820px) !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.slide-single {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.slide-single img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* remove old circular arrow */
.slide-next {
  display: none !important;
}

.slide-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.slide-prev-zone {
  left: 0;
  cursor: w-resize;
}

.slide-next-zone {
  right: 0;
  cursor: e-resize;
}

.slide-zone::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,.28);
  font-size: 42px;
  line-height: 1;
  opacity: 0;
  transition: opacity 180ms ease, color 180ms ease;
  pointer-events: none;
}

.slide-prev-zone::after {
  content: "‹";
  left: 18px;
}

.slide-next-zone::after {
  content: "›";
  right: 18px;
}

.slideshow-single:hover .slide-zone::after {
  opacity: 1;
}

.slide-zone:hover::after {
  color: rgba(0,0,0,.55);
}

@media(max-width:620px){
  .slideshow-single {
    height: 64vh !important;
    min-height: 64vh !important;
    max-height: 64vh !important;
  }

  .slide-zone::after {
    opacity: 1;
    font-size: 34px;
  }
}


/* v19 slideshow refinements */
/* a) no visible arrows, cursor only */
.slide-zone::after {
  display: none !important;
  content: none !important;
}

/* c) post/slideshow should fit inside visible browser height */
.note {
  max-height: calc(100dvh - 132px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.note p {
  flex: 0 0 auto;
}

/* If text exists above slideshow, slideshow uses remaining visual height */
.note p + .slideshow-single {
  height: min(58dvh, 700px) !important;
  min-height: min(58dvh, 700px) !important;
  max-height: min(58dvh, 700px) !important;
}

/* Image-only post can use more of the viewport */
.note .slideshow-single:first-child,
.note > .slideshow-single {
  height: calc(100dvh - 220px) !important;
  min-height: min(52dvh, 520px) !important;
  max-height: calc(100dvh - 220px) !important;
  margin-top: 0 !important;
}

/* Safari fallback */
@supports not (height: 100dvh) {
  .note {
    max-height: calc(100vh - 132px);
  }

  .note p + .slideshow-single {
    height: min(58vh, 700px) !important;
    min-height: min(58vh, 700px) !important;
    max-height: min(58vh, 700px) !important;
  }

  .note .slideshow-single:first-child,
  .note > .slideshow-single {
    height: calc(100vh - 220px) !important;
    max-height: calc(100vh - 220px) !important;
  }
}

@media(max-width:620px){
  .note {
    max-height: calc(100dvh - 118px);
  }

  .note p + .slideshow-single {
    height: 50dvh !important;
    min-height: 50dvh !important;
    max-height: 50dvh !important;
  }

  .note .slideshow-single:first-child,
  .note > .slideshow-single {
    height: calc(100dvh - 180px) !important;
    min-height: 52dvh !important;
    max-height: calc(100dvh - 180px) !important;
  }

  @supports not (height: 100dvh) {
    .note {
      max-height: calc(100vh - 118px);
    }

    .note p + .slideshow-single {
      height: 50vh !important;
      min-height: 50vh !important;
      max-height: 50vh !important;
    }

    .note .slideshow-single:first-child,
    .note > .slideshow-single {
      height: calc(100vh - 180px) !important;
      max-height: calc(100vh - 180px) !important;
    }
  }
}


/* v20 lazy post loading */
.lazy-sentinel {
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.note {
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}


/* v21 robust safari lazy loading + fade */
.lazy-fade {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 900ms cubic-bezier(.22,1,.36,1),
    transform 900ms cubic-bezier(.22,1,.36,1);
}

.lazy-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

.lazy-sentinel {
  width: 100%;
  height: 40px;
  opacity: 0;
}

.note {
  will-change: opacity, transform;
}


/* v23 TENET hover blur */
.tenet {
  transition:
    filter 260ms ease,
    opacity 260ms ease,
    color 260ms ease;
}

.tenet:hover {
  filter: blur(2.2px);
  opacity: .55;
  color: inherit !important;
}

/* v23 bottom fade / footer gradient */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  z-index: 9990;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 58%,
    rgba(255,255,255,1) 100%
  );
}

body.admin::after {
  background: linear-gradient(
    to bottom,
    rgba(17,17,17,0) 0%,
    rgba(17,17,17,.72) 58%,
    rgba(17,17,17,1) 100%
  );
}

/* keep fixed controls above footer gradient */
.tenet,
.clock,
.logout {
  z-index: 10000;
}