@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;600;700&display=swap');

:root{
  /* Material defaults shared between editor and public viewer */
  --cube-radius:26px;
  --bg-color:#03050c;
  --cube-color:#050814;
  --cube-shade:.9;
  --shadow-rgb:0,0,0;
  --shadow-strong:.9;
  --shadow-soft:.65;
  --shadow-strong-active:.98;
  --shadow-soft-active:.8;
  --shadow-y:24px;
  --shadow-blur:60px;
  --shadow-y-active:34px;
  --shadow-blur-active:90px;
  --reflection-overlay:.16;
  --reflection-active:.35;
  --floor-shadow-h:32px;
  --floor-shadow-blur:14px;
  --floor-shadow-idle:0;
  --floor-shadow-active:1;
  --cube-border-w:1px;
  --cube-border-a:.04;
  --light-x:-0.35;
  --light-y:-0.8;
  --env-mix:.12;
  --refl-blur:0px;
  --light-blur:0px;
  --refl-soft:60%;
  --refl-inner:18%;
  --self-shade:0;
  --self-shade-blur:0px;
  --self-shade-rgb:0,0,0;
  --light-enabled:1;
  /* Thumbnail glass styling */
  --thumb-glass-opacity:.92;
  --thumb-glass-tint:rgba(var(--brand,0,198,255), .18);
  --thumb-glass-dark:rgba(0,0,0,.18);
  --thumb-glass-bright:rgba(255,255,255,.16);
  /* Thumbnail title defaults */
  --thumb-title-size:18px;
  --thumb-title-weight:600;
  --thumb-title-spacing:0.01em;
  --thumb-title-line:1.2;
  --thumb-title-color:rgba(255,255,255,.95);
  --thumb-title-bg-strong:.35;
  --thumb-title-bg-soft:.2;
  --radius-comp:1;
  --radius-comp-x:1;
  --radius-comp-y:1;
  --radius-x:var(--cube-radius,26px);
  --radius-y:var(--cube-radius,26px);
  --border-comp-x:1;
  --border-comp-y:1;
  /* Content scale compensation (inverse of click size, per-axis) */
  --content-scale-x:1;
  --content-scale-y:1;
  /* Motion blur (dynamic; 0px by default) */
  --motion-blur:0px;
  /* Size scale for click-preview (1 = base size) */
  --size-scale:1;
}

.cube{
  position:absolute;
  border-radius:var(--radius-x, calc(var(--cube-radius,26px) / var(--radius-comp-x, var(--radius-comp,1))))
    / var(--radius-y, calc(var(--cube-radius,26px) / var(--radius-comp-y, var(--radius-comp,1))));
  border-style:solid;
  border-color: rgba(255,255,255,var(--cube-border-a,.04));
  border-width:
    calc(var(--cube-border-w,1px) / var(--border-comp-y,1))
    calc(var(--cube-border-w,1px) / var(--border-comp-x,1));
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(circle at bottom right, rgba(0,0,0,var(--cube-shade,.9)), var(--cube-color,#050814));
  box-shadow:
    0 var(--shadow-y,24px) var(--shadow-blur,60px) rgba(var(--shadow-rgb,0,0,0), var(--shadow-strong,.9)),
    0 calc(var(--shadow-y,24px) * .125) calc(var(--shadow-blur,60px) * .1667) rgba(var(--shadow-rgb,0,0,0), var(--shadow-soft,.65));
  transform-style:preserve-3d;
  transform:translateZ(0);
  transition:
    left .18s cubic-bezier(.22,.61,.36,1),
    top .18s cubic-bezier(.22,.61,.36,1),
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s,
    border-color .18s,
    background .18s;
  overflow:hidden;
  will-change:transform, box-shadow, opacity;
  transform-origin:center center;
}

.cube.no-trans,
.cube.is-dragging{
  transition:none !important;
}

.cube::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    /* Primary white specular hit, locked to light direction */
    radial-gradient(circle at calc(50% + var(--light-x,0)*22px) calc(20% - var(--light-y,0)*18px),
      rgba(255,255,255,.26) 0%,
      rgba(255,255,255,.18) 24%,
      transparent 64%),
    /* Colored rim/edge sheen using brand color */
    radial-gradient(circle at calc(18% + var(--light-x,0)*42px) calc(18% - var(--light-y,0)*10px),
      rgba(var(--brand,0,198,255),.25) 0%,
      rgba(var(--brand,0,198,255),.16) 26%,
      transparent 70%),
    /* Subtle vertical wash to soften the top */
    linear-gradient(to bottom,
      rgba(255,255,255,.16) 0%,
      transparent 26%);
  mix-blend-mode:screen;
  opacity: calc(var(--reflection-overlay, var(--refl-overlay,.16)) * var(--light-enabled,1));
  filter: blur(var(--light-blur,0px));
}

.cube::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-22px;
  width:80%;
  height:var(--floor-shadow-h,32px);
  background:radial-gradient(circle,rgba(0,0,0,.48),transparent 70%);
  filter:blur(var(--floor-shadow-blur,14px));
  opacity:var(--floor-shadow-idle,0);
  transition:opacity .18s;
  transform:
    translateX(calc(-50% + var(--shadow-off-x,0px)))
    translateY(var(--shadow-off-y,0px))
    scale(var(--shadow-scale-x,1), var(--shadow-scale-y,1));
}

.cube.is-active{
  box-shadow:
    0 var(--shadow-y-active,34px) var(--shadow-blur-active,90px) rgba(var(--shadow-rgb,0,0,0), var(--shadow-strong-active,.98)),
    0 calc(var(--shadow-y-active,34px) * .147) calc(var(--shadow-blur-active,90px) * .178) rgba(var(--shadow-rgb,0,0,0), var(--shadow-soft-active,.8));
  border-color:rgba(var(--brand,0,198,255),.26);
}

.cube.is-active::after{
  opacity:var(--floor-shadow-active,1);
}

.cube .surface-reflection{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at top,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.12) var(--refl-inner,18%),
      transparent var(--refl-soft,60%)
    ),
    linear-gradient(115deg,
      rgba(var(--brand,0,198,255),.16) 0%,
      transparent 40%,
      rgba(var(--brand,0,198,255),.06) 70%,
      transparent 100%);
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .22s;
  will-change: transform;
  transform: translate(var(--refl-parallax-x,0px), var(--refl-parallax-y,0px));
  /* Combine static reflection blur with motion blur */
  filter: blur(calc(var(--refl-blur,0px) + var(--motion-blur,0px)));
  pointer-events:none;
}

.cube.is-active .surface-reflection{
  opacity: calc(var(--reflection-active, var(--refl-active,.35)) * var(--light-enabled,1));
}

.cube .thumb{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-blend-mode:soft-light, normal;
  mix-blend-mode:soft-light;
  filter:saturate(.92) brightness(.9) contrast(1.02);
  transform-origin:center center;
  transform:scale(var(--content-scale-x,1), var(--content-scale-y,1));
  transition:
    opacity .35s cubic-bezier(.22,.61,.36,1),
    transform .45s cubic-bezier(.22,.61,.36,1),
    filter .35s cubic-bezier(.22,.61,.36,1),
    backdrop-filter .45s cubic-bezier(.22,.61,.36,1);
  opacity:var(--thumb-glass-opacity,.92);
  z-index:3;
  /* Let clicks pass through to content/player */
  pointer-events:none;
}
.cube.thumb-open .thumb,
.cube.selected .thumb{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.thumb.is-empty-thumb{
  opacity:0;
}

.cube .thumb::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(circle at calc(50% + var(--light-x,0)*26px) calc(18% - var(--light-y,0)*22px), var(--thumb-glass-tint, rgba(var(--brand,0,198,255), .18)), transparent 65%),
    linear-gradient(160deg, var(--thumb-glass-bright, rgba(255,255,255,.16)), transparent 55%),
    linear-gradient(200deg, var(--thumb-glass-dark, rgba(0,0,0,.18)), transparent 60%);
  mix-blend-mode:screen;
  pointer-events:none;
}

.cube .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05));
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.cube.thumb-open .thumb{
  opacity:0;
  transform:scale(calc(var(--content-scale-x,1) * 1.06), calc(var(--content-scale-y,1) * 1.06)) translateY(-10px) rotateX(4deg);
  filter:blur(2px) saturate(1.05) brightness(1.05);
  pointer-events:none;
}
.cube.is-focused .thumb,
.cube.selected .thumb{
  /* Hide glass when a cube is active/focused so underlying content is clickable */
  opacity:0;
  pointer-events:none;
}
.cube.canvas-has-video .thumb{
  opacity:var(--thumb-glass-opacity,.92);
  pointer-events:none;
}

.cube .content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow:hidden;
  opacity:0;
  transform:scale(calc(var(--content-scale-x,1) * .94), calc(var(--content-scale-y,1) * .94));
  transition:
    opacity .26s ease,
    transform .3s cubic-bezier(.22,.61,.36,1);
  z-index:1;
  pointer-events:none;
}

.cube.thumb-open .content{
  opacity:1;
  transform:scale(var(--content-scale-x,1), var(--content-scale-y,1));
  pointer-events:auto;
}
.cube.selected .content{
  opacity:1;
  transform:scale(var(--content-scale-x,1), var(--content-scale-y,1));
  pointer-events:auto;
}

/* In editor, ignore focus-only state for thumb/content; require selection/thumb-open */
body.is-editor .cube.is-focused:not(.selected):not(.thumb-open) .thumb{
  opacity:var(--thumb-glass-opacity,.92);
  visibility:visible;
  pointer-events:none;
}
body.is-editor .cube.is-focused:not(.selected):not(.thumb-open) .content{
  opacity:0;
  pointer-events:none;
  transform:scale(calc(var(--content-scale-x,1) * .94), calc(var(--content-scale-y,1) * .94));
}

.cube .thumb-title{
  position:absolute;
  left:12px;
  right:12px;
  top:12px;
  padding:8px 10px;
  border-radius:12px;
  color:var(--thumb-title-color, rgba(255,255,255,.95));
  font-weight:var(--thumb-title-weight, 600);
  letter-spacing:var(--thumb-title-spacing, 0.01em);
  font-size:var(--thumb-title-size, 18px);
  line-height:var(--thumb-title-line, 1.2);
  text-shadow:0 2px 6px rgba(0,0,0,.4);
  background:linear-gradient(180deg, rgba(0,0,0,var(--thumb-title-bg-strong,.35)), rgba(0,0,0,var(--thumb-title-bg-soft,.2)));
  backdrop-filter:blur(4px);
  mix-blend-mode:screen;
  font-family:var(--thumb-title-font, 'Epilogue', sans-serif);
  text-align:var(--thumb-title-align, center);
  opacity:.95;
  transform:scale(var(--content-scale-x,1), var(--content-scale-y,1));
  z-index:4;
  pointer-events:none;
}

.cube .thumb-title:empty{
  display:none;
}

.cube .content img{
  max-width:100%;
  max-height:100%;
  border-radius:clamp(0px, calc(var(--cube-radius,26px) - 8px), var(--cube-radius,26px));
}

.cube .content iframe,
.cube .content video{
  width:100%;
  height:100%;
  border:0;
  border-radius:clamp(0px, calc(var(--cube-radius,26px) - 8px), var(--cube-radius,26px));
  background:#000;
  pointer-events:auto;
}

.cube .content video{
  object-fit:cover;
}

.cube .content.text{
  text-align:center;
  line-height:1.4;
}

/* Mutual shadowing (very subtle) */
.cube.muted::after{
  opacity:.08;
  background:radial-gradient(circle,rgba(0,0,0,.45),transparent 70%);
}

/* Selection/editor state shared with viewer */
.cube.editable{
  cursor:move;
  outline:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
}

.cube.selected{
  border-color: rgba(var(--brand,0,198,255),.55);
}

.cube.is-focused{
  outline:0;
  box-shadow:
    0 0 0 2px rgba(var(--brand,0,198,255),.55),
    0 34px 90px rgba(0,0,0,.98),
    0 5px 16px rgba(0,0,0,.85);
  border-color:rgba(var(--brand,0,198,255),.35);
}

.cube .handle{
  position:absolute;
  width:16px;
  height:16px;
  right:10px;
  bottom:10px;
  border-radius:4px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.5);
  cursor:nwse-resize;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  transform-origin:bottom right;
  transform:scale(var(--content-scale-x,1), var(--content-scale-y,1));
}

/* Click/focus hit cover to ensure clicks over iframes/videos */
.cube .hit-cover{
  position:absolute;
  inset:0;
  background:transparent;
  border:0;
  padding:0;
  opacity:0;
  z-index:5;
  cursor:default;
  appearance:none;
  /* Disable cover in published view: keep it hidden/non-interactive */
  display:none;
  pointer-events:none;
}

.cube.is-focused .hit-cover{
  pointer-events:none;
}
.cube.canvas-has-video .hit-cover{
  pointer-events:none;
}

.cube-view .canvas-layers{
  display:none;
  pointer-events:none;
}
.cube-view .cube.selected .canvas-layers,
.cube-view .cube.is-focused .canvas-layers,
.cube-view .cube.thumb-open .canvas-layers{
  display:block;
  pointer-events:auto;
}
.cube-view .canvas-layer{ pointer-events:auto; }
.cube .canvas-layer.canvas-video{ pointer-events:auto; }

/* Editor: mirror slug behavior so thumbs stay on top until selection */
body.is-editor .canvas-layers{
  display:none;
  pointer-events:none;
}
body.is-editor .cube.selected .canvas-layers,
body.is-editor .cube.thumb-open .canvas-layers{
  display:block;
  pointer-events:auto;
}
/* Always show layers in canvas editor preview or edit mode */
.cube.canvas-editing .canvas-layers,
#canvasModal .canvas-preview .canvas-layers{
  display:block;
  pointer-events:auto;
}

.canvas-layers{
  position:absolute;
  inset:0;
  pointer-events:none;
  transform:scale(var(--content-scale-x,1), var(--content-scale-y,1));
  transform-origin:top left;
  z-index:12;
}
.canvas-layers.is-editing{
  pointer-events:auto;
  /* Prevent touch scrolling while dragging/resizing */
  touch-action:none;
}
.canvas-layer{
  position:absolute;
  overflow:hidden;
  border-radius:inherit;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.canvas-layer.canvas-text{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  font-weight:600;
  font-size:clamp(12px, calc(12px + 0.4vw), 28px);
  line-height:1.4;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  background:rgba(0,0,0,.18);
  word-break:break-word;
  white-space:pre-wrap;
}
.canvas-layer.canvas-color{
  background:rgba(255,255,255,.08);
}
.canvas-layer.canvas-image{
  background-size:contain;
}
.canvas-layer.canvas-video iframe{
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.canvas-layer.is-hidden{
  opacity:0.35;
  filter:saturate(0);
}
.canvas-layer .canvas-handles{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.canvas-layer .handle{
  position:absolute;
  width:12px;
  height:12px;
  border:1px solid #fff;
  background:rgba(0,0,0,.6);
  border-radius:3px;
  pointer-events:auto;
  z-index:2;
}
.canvas-layer .handle.nw{ top:-6px; left:-6px; cursor:nwse-resize; }
.canvas-layer .handle.ne{ top:-6px; right:-6px; cursor:nesw-resize; }
.canvas-layer .handle.sw{ bottom:-6px; left:-6px; cursor:nesw-resize; }
.canvas-layer .handle.se{ bottom:-6px; right:-6px; cursor:nwse-resize; }
.canvas-layer .handle.n{ top:-6px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.canvas-layer .handle.s{ bottom:-6px; left:50%; transform:translateX(-50%); cursor:ns-resize; }
.canvas-layer .handle.w{ left:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.canvas-layer .handle.e{ right:-6px; top:50%; transform:translateY(-50%); cursor:ew-resize; }
.canvas-layer .handle.rotate{
  top:-24px;
  left:50%;
  width:14px;
  height:14px;
  transform:translateX(-50%);
  border-radius:50%;
  cursor:grab;
}
.canvas-layer.is-editing{
  outline:1px dashed rgba(255,255,255,.45);
  cursor:move;
  /* Allow handles to sit fully outside the clipped content box */
  overflow:visible;
  user-select:none;
  touch-action:none;
}
.canvas-layer.is-editing[contenteditable="true"]{
  user-select:text;
}
.canvas-layer.is-editing iframe,
.canvas-layer.is-editing video,
.canvas-layer.is-editing img{
  /* Keep media clickable even in edit mode; drag/resize still works via pointer capture */
  pointer-events:auto;
}
.canvas-layer.active{
  outline:2px solid rgba(var(--brand,0,198,255),.8);
}

#canvasModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
#canvasModal.open{ display:block; }
#canvasModal .canvas-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}
#canvasModal .canvas-modal-card{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(720px, 92vw);
  max-height:80vh;
  background:#0f1526;
  color:#e8ebff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 16px 80px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
}
#canvasModal .canvas-modal-card.collapsed .canvas-modal-body{
  display:none;
}
#canvasModal .canvas-modal-actions{
  display:flex;
  gap:6px;
}
#canvasModal header[data-canvas-drag]{
  cursor:move;
}
#canvasModal header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#canvasModal .title{ font-weight:700; letter-spacing:.02em; }
#canvasModal .subtitle{ font-size:12px; opacity:.8; }
#canvasModal .canvas-modal-body{
  padding:12px 14px;
  overflow:auto;
  max-height:70vh;
  display:flex;
  flex-direction:column;
  gap:10px;
}
#canvasModal .canvas-preview-wrap{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#canvasModal .canvas-preview{
  width:100%;
  aspect-ratio: 16 / 9;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.06), rgba(0,0,0,.3));
  border-radius:10px;
  border:1px dashed rgba(255,255,255,.12);
  position:relative;
  overflow:visible;
}
#canvasModal .canvas-preview-inner{
  position:absolute;
  inset:0;
  overflow:visible;
}
#canvasModal .canvas-preview .cube.canvas-preview-cube{
  overflow:visible;
}
#canvasModal .canvas-preview-wrap .hint{
  font-size:12px;
  opacity:.7;
}
#canvasModal .canvas-toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#canvasModal .canvas-layer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.canvas-layer-row{
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:8px;
  background:rgba(255,255,255,.02);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.canvas-layer-row .row-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.canvas-layer-row .row-actions button{
  margin-left:6px;
}
.canvas-layer-row .row-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
  gap:6px;
}
.canvas-layer-row label{
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.canvas-layer-row input,
.canvas-layer-row select{
  width:100%;
  box-sizing:border-box;
  background:#0c111d;
  color:#f5f7ff;
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  padding:6px 8px;
}
.canvas-layer-row .row-content{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
  gap:6px;
}

/* Environment and self-shade overlays */
.cube .env-tint{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background: radial-gradient(
    circle at calc(50% + var(--light-x,0)*20px) calc(20% - var(--light-y,0)*20px),
    rgba(var(--brand,0,198,255), var(--env-mix,.12)),
    transparent 60%
  );
  mix-blend-mode: soft-light;
  opacity: calc(var(--light-enabled,1));
  transform: translate(var(--refl-parallax-x,0px), var(--refl-parallax-y,0px));
  /* Static light blur + motion blur for subtle smearing */
  filter: blur(calc(var(--light-blur,0px) + var(--motion-blur,0px)));
}

.cube .self-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background: linear-gradient(
    to bottom,
    rgba(var(--self-shade-rgb,0,0,0), var(--self-shade,0)),
    transparent 60%
  );
  transform-origin:center center;
  transform: rotate(var(--shade-rot,0deg));
  opacity: calc(var(--light-enabled,1));
  filter: blur(var(--self-shade-blur,0px));
}