/* ==========================================================================
     Texture Design Pack
   --------------------------------------------------------------------------
   
    body / html / :root /  .tdp 
    keyframes id  tdp- 
   

    position:fixed 
    body 
   ========================================================================== */

/* ---------- 1.  token ------------------------------------------ */
.tdp[data-tdp-skin="cyber"],
.tdp-bg[data-tdp-skin="cyber"],
.tdp-bg__paint[data-tdp-skin="cyber"],
.tdp-deco[data-tdp-skin="cyber"]{
  --tdp-bg:#080d1a; --tdp-surface:rgba(14,22,36,.62);
  --tdp-ink:#e9fdff; --tdp-dim:#8fa8c0;
  --tdp-accent:#00f0ff; --tdp-accent2:#ff2d78; --tdp-accent3:#c6ff2e;
  --tdp-line:rgba(0,240,255,.26);
  --tdp-display:"Arial Black","Helvetica Neue",Impact,system-ui,sans-serif;
  --tdp-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --tdp-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --tdp-radius:0px; --tdp-track:.16em;
  --tdp-rule-soft:rgba(0,240,255,.26);
  --tdp-sheet:1180px;
}
.tdp[data-tdp-skin="story"],
.tdp-bg[data-tdp-skin="story"],
.tdp-bg__paint[data-tdp-skin="story"],
.tdp-deco[data-tdp-skin="story"]{
  --tdp-bg:#fdf6e6; --tdp-surface:#fffdf7;
  --tdp-ink:#4a3a2c; --tdp-dim:#8b755f;
  --tdp-accent:#ff8fb1; --tdp-accent2:#6cc24a; --tdp-accent3:#7ec8e3;
  --tdp-line:rgba(74,58,44,.22);
  --tdp-display:"Comic Sans MS","Chalkboard SE",cursive;
  --tdp-body:"Segoe Print","Comic Sans MS",cursive;
  --tdp-mono:"Segoe Print","Comic Sans MS",cursive;
  --tdp-radius:20px; --tdp-track:.02em;
  --tdp-rule-soft:#c9b49a;
  --tdp-sheet:1080px;
  /* the clover's wax mask: paper shows through speck by speck */
  --tdp-holes:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='5'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0.72'/></filter><rect width='100%' height='100%' filter='url(%23h)'/></svg>");
}
.tdp[data-tdp-skin="spec"],
.tdp-bg[data-tdp-skin="spec"],
.tdp-bg__paint[data-tdp-skin="spec"],
.tdp-deco[data-tdp-skin="spec"]{
  --tdp-bg:#f4f4f1; --tdp-surface:#fff;
  --tdp-ink:#101215; --tdp-dim:#6d7176;
  --tdp-accent:#16181a; --tdp-accent2:#8d908c; --tdp-accent3:#c9ccc9;
  --tdp-line:rgba(16,18,21,.18);
  --tdp-display:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --tdp-body:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --tdp-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --tdp-radius:0px; --tdp-track:.18em;
  --tdp-rule-soft:#a9ada8;
  --tdp-sheet:1140px;
}
.tdp[data-tdp-skin="tarot"],
.tdp-bg[data-tdp-skin="tarot"],
.tdp-bg__paint[data-tdp-skin="tarot"],
.tdp-deco[data-tdp-skin="tarot"]{
  --tdp-bg:#130e28; --tdp-surface:rgba(58,40,94,.82);
  --tdp-ink:#f6ecd4; --tdp-dim:#b5a7cf;
  --tdp-accent:#d4af37; --tdp-accent2:#f7e7a3; --tdp-accent3:#b06ab3;
  --tdp-line:rgba(212,175,55,.34);
  --tdp-display:Georgia,"Times New Roman",serif;
  --tdp-body:Georgia,"Iowan Old Style","Times New Roman",serif;
  --tdp-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --tdp-radius:2px; --tdp-track:.2em;
  --tdp-rule-soft:rgba(212,175,55,.34);
  --tdp-sheet:1080px;
}
.tdp[data-tdp-skin="hud"],
.tdp-bg[data-tdp-skin="hud"],
.tdp-bg__paint[data-tdp-skin="hud"],
.tdp-deco[data-tdp-skin="hud"]{
  --tdp-bg:#0b101a; --tdp-surface:rgba(48,60,76,.58);
  --tdp-ink:#eef4fa; --tdp-dim:#9fb0c0;
  --tdp-accent:#ff5347; --tdp-accent2:#b6e2ff; --tdp-accent3:#ffb020;
  --tdp-line:rgba(159,216,255,.26);
  --tdp-display:"Bahnschrift","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
  --tdp-body:system-ui,-apple-system,"Segoe UI",sans-serif;
  --tdp-mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --tdp-radius:3px; --tdp-track:.2em;
  --tdp-rule-soft:rgba(159,216,255,.26);
  --tdp-sheet:1160px;
  /* Satin stainless steel: a light/dark band ramp with near-black stops.
     No directional grain -- fine vertical striping reads as bars across the
     glyphs, not as brushed metal (the source page says exactly this). */
  --tdp-steel:linear-gradient(180deg,#ffffff 0%,#d3dfea 10%,#5f7385 26%,#fbfdff 41%,
    #8296a8 56%,#46586a 73%,#dbe6ef 88%,#f2f7fb 100%);
}

/* ---------- 2.  --------------------------------------------------- */
.tdp, .tdp *, .tdp *::before, .tdp *::after{ box-sizing:border-box; }
.tdp{
  position:relative;
  color:var(--tdp-ink);
  font-family:var(--tdp-body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Effect power (%). 0 = effect off, 100 = identical to the five-skin page,
     200 = double. Written onto each instance root by the text widget's
     fx_power slider. The fallback here matters: an undefined custom property
     makes every calc() that uses it invalid at computed-value time. */
  --tdp-fx:100;
}
.tdp-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- 3.  background layers ---------------------------------------
   Bottom to top: paint (the skin's own colour field) -> tint -> effect
   canvas -> decoration canvas -> texture overlay.
   The paint layer is what makes a skin recognisable: in the five-skin source
   page each skin paints its own body background (clashing radial gradients,
   graph paper, night sky). Without it a "cyber" page was flat dark grey --
   which is why the colours looked wrong. Scanlines are NOT part of the
   default combo any more: the source page puts that layer above the content,
   but here it just banded over the colour field.
   The decoration canvas carries the per-skin margin artwork (radar dish,
   clovers + candies, drafting construction lines, crystal ball). In the
   source page that artwork lives in the sheet's .deco slot, i.e. ABOVE the
   effect canvas -- hence the order below. */
.tdp-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
/* The three behaviours. "scroll" is the default: the layer is as tall as the
   document and scrolls with the page (the canvas inside it is only
   viewport-sized and is re-positioned + re-offset every frame by tdp.js, so it
   always covers the visible slice without allocating a page-sized bitmap).
   "fixed" is the old default -- pinned to the viewport. */
/* Both "scroll" and "fixed" use a fixed layer: that is the only way to escape
   an Elementor container's overflow:hidden and to cover the whole viewport --
   an absolutely positioned layer is clipped to its container and only as wide
   as the column, which read as "the effect only covers the element".
   The difference between the two is what the CONTENT is anchored to:
     fixed  -> the viewport (the effect does not move while you scroll)
     scroll -> the page (tdp.js offsets the drawing by scrollY and slides the
               decoration the same way, so the effect moves with the page) */
/* ---- the three behaviours -------------------------------------------
   doc    : a REAL page element. tdp.js moves this layer to <body>, gives it
            the document's height and lets the browser scroll it natively --
            no per-frame JS touches its position, so it cannot lag or shake.
            That is "fixed in the page", not "fixed in the viewport".
   fixed  : pinned to the viewport (the layer stays inside the widget and
            escapes the container's overflow:hidden).
   self   : absolutely positioned inside the widget's own box.
   (--scroll is the old name for --doc and is still honoured by tdp.js.) */
.tdp-bg--doc{ position:absolute; top:0; left:0; right:0; height:400px; }
.tdp-bg--fixed{ position:fixed; }
.tdp-bg--self{ position:absolute; }
.tdp-bg__paint{ position:absolute; inset:0; }
.tdp-bg__tint{ position:absolute; inset:0; }
.tdp-bg__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* The decoration canvas is deliberately NOT .tdp-bg__canvas: the "opacity"
   control targets the effect canvas only, and the skin artwork should not
   fade along with it. */
.tdp-bg__deco{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---- the five skin colour fields (verbatim from the source page's body) ---- */
.tdp-bg__paint[data-tdp-skin="cyber"]{
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(0,240,255,.20), transparent 62%),
    radial-gradient(900px 560px at 96% 6%, rgba(255,45,120,.18), transparent 60%),
    radial-gradient(1000px 700px at 70% 108%, rgba(138,43,226,.24), transparent 64%),
    #080d1a;
}
.tdp-bg__paint[data-tdp-skin="story"]{
  background:
    radial-gradient(120% 80% at 50% -10%,#fffdf6,rgba(255,253,246,0) 60%),
    radial-gradient(90% 60% at 100% 100%,rgba(126,200,227,.22),rgba(126,200,227,0) 60%),
    radial-gradient(80% 60% at 0% 80%,rgba(255,207,77,.20),rgba(255,207,77,0) 62%),
    #fdf6e6;
}
.tdp-bg__paint[data-tdp-skin="spec"]{
  background-color:#f4f4f1;
  background-image:
    linear-gradient(rgba(16,18,21,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,21,.05) 1px,transparent 1px),
    linear-gradient(rgba(16,18,21,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,21,.085) 1px,transparent 1px);
  background-size:12px 12px,12px 12px,60px 60px,60px 60px;
}
.tdp-bg__paint[data-tdp-skin="tarot"]{
  background:
    radial-gradient(900px 620px at 78% 8%, rgba(129,92,186,.46), transparent 64%),
    radial-gradient(700px 520px at 12% 30%, rgba(196,124,198,.30), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(212,175,55,.16), transparent 62%),
    #130e28;
}
.tdp-bg__paint[data-tdp-skin="hud"]{
  background:
    radial-gradient(940px 640px at 86% -4%, rgba(255,83,71,.17), transparent 62%),
    radial-gradient(800px 560px at 8% 20%, rgba(159,216,255,.14), transparent 64%),
    radial-gradient(900px 620px at 50% 106%, rgba(255,176,32,.11), transparent 64%),
    #0b101a;
}

.tdp-bg__tex{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.tdp-bg__tex--grain{
  opacity:.5; mix-blend-mode:multiply; background-size:260px 260px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)' opacity='.45'/%3E%3C/svg%3E");
}
.tdp-bg__tex--scan{
  opacity:.5; mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 2px,rgba(0,0,0,.22) 2px 4px);
}
.tdp-bg__tex--grid{
  opacity:.5;
  background-image:
    linear-gradient(rgba(16,18,21,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,21,.05) 1px,transparent 1px),
    linear-gradient(rgba(16,18,21,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,21,.085) 1px,transparent 1px);
  background-size:12px 12px,12px 12px,60px 60px,60px 60px;
}

/* ---------- 3c.  theme decoration (DOM) --------------------------------
   Copied item by item, value by value, from the five-skin reference page
   (the page path is recorded in the handover doc, not here: this file must
   stay pure ASCII -- a non-ASCII byte in CSS is a known landmine on servers
   that do not declare charset).
   Class names (.d-clover, .c1, .d-candy, .d-orb ...), positions (the
   left/right/top percentages), sizes (--s), rotations (--rot), durations
   (--dur / --dl) and every keyframe value are the source page's, so the
   layout is identical. The only edits are:
     * selectors are scoped:  body[data-skin="x"] .deco  ->  .tdp-deco[data-tdp-skin="x"]
     * keyframe and SVG pattern ids carry a tdp- prefix (the plugin's
       isolation rule: never collide with a theme or another plugin)
     * colour variables map onto this plugin's tokens
       (--green -> --tdp-accent2, --holes -> --tdp-holes, --mk -> --tdp-accent)
   All those percentages are relative to the source page's .sheet column, so
   the items live in .tdp-deco__sheet: same max-width (--tdp-sheet:
   1180/1080/1140/1080/1160) and the same horizontal padding as .sheet.
   Do NOT re-design anything here without checking the source page first. */
.tdp-deco{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.tdp-deco__sheet{
  position:relative; width:100%; height:100%; margin:0 auto;
  max-width:var(--tdp-sheet,1180px);
  padding:0 clamp(20px,4vw,44px);
}
.tdp-deco > .tdp-deco__sheet > *{ display:none; position:absolute; }

/* ---- storybook: clovers (4 circles), candies, clouds, sparkles ---- */
.tdp-deco[data-tdp-skin="story"]{ overflow:visible; }
.tdp-deco[data-tdp-skin="story"] .d-clover{
  display:block;width:var(--s,38px);height:var(--s,38px);
  background:
    radial-gradient(circle at 28% 28%,var(--leaf,var(--tdp-accent2)) 0 25%,transparent 26%),
    radial-gradient(circle at 72% 28%,var(--leaf,var(--tdp-accent2)) 0 25%,transparent 26%),
    radial-gradient(circle at 28% 72%,var(--leaf,var(--tdp-accent2)) 0 25%,transparent 26%),
    radial-gradient(circle at 72% 72%,var(--leaf,var(--tdp-accent2)) 0 25%,transparent 26%);
  filter:url(#tdp-crayon-1) drop-shadow(0 2px 0 rgba(90,70,50,.14));
  -webkit-mask-image:var(--tdp-holes);mask-image:var(--tdp-holes);
  -webkit-mask-size:140px 140px;mask-size:140px 140px;
  animation:tdp-floaty var(--dur,7s) ease-in-out infinite;
  animation-delay:var(--dl,0s);
}
.tdp-deco[data-tdp-skin="story"] .d-clover::after{
  content:"";position:absolute;left:calc(50% - 1.5px);top:66%;width:3px;height:34%;
  background:#4f8f36;border-radius:2px;transform:rotate(6deg);
}
/* parked in the sheet margins so they frame the copy instead of sitting on it */
.tdp-deco[data-tdp-skin="story"] .c1{left:-9%;top:5%;--s:46px;--rot:14deg;--dur:8s}
.tdp-deco[data-tdp-skin="story"] .c2{right:-7%;top:13%;--s:34px;--leaf:#7ec8e3;--rot:-18deg;--dur:6.5s;--dl:.6s}
.tdp-deco[data-tdp-skin="story"] .c3{left:-6%;top:30%;--s:30px;--leaf:#ffcf4d;--rot:22deg;--dur:7.4s;--dl:1.1s}
.tdp-deco[data-tdp-skin="story"] .c4{right:-5%;top:42%;--s:48px;--rot:-8deg;--dur:9s;--dl:.3s}
.tdp-deco[data-tdp-skin="story"] .c5{left:-8%;top:58%;--s:36px;--leaf:#b57edc;--rot:16deg;--dur:7.8s;--dl:.9s}
.tdp-deco[data-tdp-skin="story"] .c6{right:-6%;top:72%;--s:28px;--leaf:#ff8fb1;--rot:-24deg;--dur:6.8s;--dl:1.4s}
.tdp-deco[data-tdp-skin="story"] .d-candy{
  display:block;width:var(--s,22px);height:var(--s,22px);border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.62) 0 14%,transparent 15%),
    repeating-linear-gradient(115deg,var(--candy,#ff8fb1) 0 9px,rgba(255,255,255,.42) 9px 18px);
  filter:url(#tdp-crayon-1) drop-shadow(0 2px 0 rgba(90,70,50,.14));
  animation:tdp-floaty var(--dur,6s) ease-in-out infinite;animation-delay:var(--dl,0s);
}
/* crinkled cellophane twists, clipped so the pleats read as wrapper ends */
.tdp-deco[data-tdp-skin="story"] .d-candy::before,
.tdp-deco[data-tdp-skin="story"] .d-candy::after{
  content:"";position:absolute;top:0;height:100%;width:54%;
  background:repeating-linear-gradient(90deg,var(--candy,#ff8fb1) 0 3px,rgba(255,255,255,.55) 3px 6px);
}
.tdp-deco[data-tdp-skin="story"] .d-candy::before{left:-48%;clip-path:polygon(0 0,100% 40%,100% 60%,0 100%,26% 50%)}
.tdp-deco[data-tdp-skin="story"] .d-candy::after{right:-48%;clip-path:polygon(100% 0,0 40%,0 60%,100% 100%,74% 50%)}
/* waxy 4-point sparkles */
.tdp-deco[data-tdp-skin="story"] .d-spark{
  display:block;width:var(--s,40px);height:var(--s,40px);background:var(--sc,#ffd24a);
  clip-path:polygon(50% 0%,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0% 50%,40% 40%);
  animation:tdp-sparkle-float 3.4s ease-in-out infinite;animation-delay:var(--dl,0s);
  filter:drop-shadow(0 1px 0 rgba(90,70,50,.16));
}
.tdp-deco[data-tdp-skin="story"] .s1{left:-3%;top:11%;--s:34px;--dl:.2s}
.tdp-deco[data-tdp-skin="story"] .s2{right:-2%;top:36%;--s:24px;--sc:#fff0b8;--dl:1.1s}
.tdp-deco[data-tdp-skin="story"] .s3{left:-4%;top:50%;--s:20px;--sc:#ffb3ca;--dl:1.8s}
.tdp-deco[data-tdp-skin="story"] .s4{right:-1%;top:86%;--s:28px;--sc:#cfeffb;--dl:.7s}
@keyframes tdp-sparkle-float{
  0%,100%{transform:translateY(0) rotate(0deg) scale(.7);opacity:.25}
  45%{transform:translateY(-13px) rotate(38deg) scale(1.15);opacity:1}
  70%{transform:translateY(-6px) rotate(60deg) scale(.9);opacity:.7}
}
.tdp-deco[data-tdp-skin="story"] .k1{right:-10%;top:3%;--s:26px;--candy:#ff8fb1;--rot:-12deg}
.tdp-deco[data-tdp-skin="story"] .k2{left:-4%;top:20%;--s:20px;--candy:#ffcf4d;--rot:18deg;--dl:.5s}
.tdp-deco[data-tdp-skin="story"] .k3{right:-8%;top:52%;--s:24px;--candy:#7ec8e3;--rot:-20deg;--dl:1s}
.tdp-deco[data-tdp-skin="story"] .k4{left:-7%;top:78%;--s:22px;--candy:#b57edc;--rot:12deg;--dl:.8s}
.tdp-deco[data-tdp-skin="story"] .k5{right:-3%;top:27%;--s:18px;--candy:#6cc24a;--rot:-8deg;--dl:1.3s}
.tdp-deco[data-tdp-skin="story"] .d-cloud{
  display:block;width:120px;height:44px;opacity:.75;
  background:
    radial-gradient(circle at 30% 60%,#fff 0 42%,transparent 43%),
    radial-gradient(circle at 55% 42%,#fff 0 48%,transparent 49%),
    radial-gradient(circle at 78% 62%,#fff 0 38%,transparent 39%);
  filter:url(#tdp-crayon-2) drop-shadow(0 3px 0 rgba(126,200,227,.25));
  animation:tdp-drift 26s linear infinite;
}
.tdp-deco[data-tdp-skin="story"] .g1{left:-16%;top:2%;--dur:30s}
.tdp-deco[data-tdp-skin="story"] .g2{right:-4%;top:64%;width:86px;height:32px;animation-duration:38s;animation-delay:-8s}
@keyframes tdp-floaty{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-15px) rotate(calc(var(--rot,0deg) + 7deg))}
}
@keyframes tdp-drift{
  0%{transform:translateX(0)}
  50%{transform:translateX(46px)}
  100%{transform:translateX(0)}
}

/* ---- midnight: crystal ball, pedestal, orbit, tarot card ---- */
.tdp-deco[data-tdp-skin="tarot"]{ overflow:visible; }
.tdp-deco[data-tdp-skin="tarot"] .d-orb{
  display:block;position:absolute;right:3%;top:16%;width:214px;height:214px;
  border-radius:50%;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.85) 0 2.5%,rgba(255,255,255,.20) 8%,rgba(255,255,255,0) 21%),
    radial-gradient(circle at 70% 78%,rgba(176,106,179,.60),rgba(176,106,179,0) 56%),
    radial-gradient(circle at 28% 72%,rgba(109,74,158,.50),rgba(109,74,158,0) 62%),
    radial-gradient(circle at 50% 50%,#2b1c4e 0 40%,#160e2c 72%,#0a0616 100%);
  box-shadow:
    0 0 0 1px rgba(212,175,55,.40),
    inset -16px -20px 54px rgba(0,0,0,.78),
    inset 14px 16px 46px rgba(190,160,255,.30),
    0 34px 90px -22px rgba(138,90,220,.60),
    0 0 130px -12px rgba(176,106,179,.40);
  animation:tdp-orb-float 12s ease-in-out infinite;
}
.tdp-deco[data-tdp-skin="tarot"] .d-orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle at 78% 74%,transparent 56%,rgba(212,175,55,.45) 76%,transparent 84%);
}
.tdp-deco[data-tdp-skin="tarot"] .d-orb__mist{
  position:absolute;border-radius:50%;filter:blur(17px);mix-blend-mode:screen;
}
.tdp-deco[data-tdp-skin="tarot"] .d-orb__mist.a{
  inset:13%;
  background:radial-gradient(circle at 38% 38%,rgba(120,200,255,.40),transparent 62%);
  animation:tdp-orb-churn 19s linear infinite;
}
.tdp-deco[data-tdp-skin="tarot"] .d-orb__mist.b{
  inset:21%;
  background:radial-gradient(circle at 64% 54%,rgba(255,150,220,.34),transparent 60%);
  animation:tdp-orb-churn 29s linear infinite reverse;
}
.tdp-deco[data-tdp-skin="tarot"] .d-orb__spec{
  position:absolute;left:15%;top:10%;width:36%;height:21%;border-radius:50%;
  background:radial-gradient(ellipse at 42% 40%,rgba(255,255,255,.95),rgba(255,255,255,.16) 60%,transparent 76%);
  filter:blur(2px);transform:rotate(-26deg);
}
@keyframes tdp-orb-churn{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.14)}
  100%{transform:rotate(360deg) scale(1)}
}
@keyframes tdp-orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.tdp-deco[data-tdp-skin="tarot"] .d-pedestal{
  display:block;position:absolute;right:calc(3% + 57px);top:calc(16% + 196px);width:100px;height:52px;
  background:linear-gradient(180deg,#2a1a42,#0b0716);
  border-radius:50% 50% 44% 44%/62% 62% 38% 38%;
  box-shadow:inset 0 2px 0 rgba(212,175,55,.5),0 22px 46px -14px rgba(0,0,0,.95);
}
.tdp-deco[data-tdp-skin="tarot"] .d-orbit{
  display:block;position:absolute;right:-2%;top:calc(16% - 40px);width:302px;height:302px;
  border-radius:50%;border:1px dashed rgba(212,175,55,.30);
  animation:tdp-orbit-breathe 9s ease-in-out infinite;
}
.tdp-deco[data-tdp-skin="tarot"] .d-orbit__ring{
  position:absolute;inset:-15px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 42%,rgba(212,175,55,.55) 60%,rgba(247,231,163,.95) 71%,transparent 82%);
  -webkit-mask:radial-gradient(circle,transparent 0 77%,#000 78% 100%);
  mask:radial-gradient(circle,transparent 0 77%,#000 78% 100%);
  animation:tdp-orbit-spin 24s linear infinite;
}
@keyframes tdp-orbit-spin{to{transform:rotate(360deg)}}
@keyframes tdp-orbit-breathe{0%,100%{opacity:.5}50%{opacity:1}}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot{
  display:block;position:absolute;right:1%;top:73%;left:auto;width:106px;height:174px;border-radius:7px;
  background:linear-gradient(160deg,rgba(40,26,68,.94),rgba(13,8,24,.97));
  border:1px solid rgba(212,175,55,.50);
  box-shadow:0 24px 56px -20px rgba(0,0,0,.95),0 0 46px -16px rgba(176,106,179,.65);
  transform:rotate(-8deg);
  animation:tdp-card-float 13s ease-in-out infinite;
}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__frame{
  position:absolute;inset:7px;border:1px solid rgba(247,231,163,.78);border-radius:4px;
  box-shadow:inset 0 0 0 3px rgba(212,175,55,.16),0 0 16px -4px rgba(247,231,163,.65);
}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__frame::before,
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__frame::after{
  content:"";position:absolute;width:9px;height:9px;
  border:1px solid rgba(247,231,163,.9);background:#100a1e;transform:rotate(45deg);
}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__frame::before{left:-5px;top:-5px}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__frame::after{right:-5px;bottom:-5px}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__star{
  position:absolute;left:50%;top:42%;width:46px;height:46px;margin:-23px 0 0 -23px;
  background:linear-gradient(180deg,#fff6d8,#d4af37 70%,#9a7a24);
  clip-path:polygon(50% 0%,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0% 50%,41% 41%);
  filter:drop-shadow(0 0 12px rgba(247,231,163,.85));
}
.tdp-deco[data-tdp-skin="tarot"] .d-tarot__star::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#0f0a1c;
}
@keyframes tdp-card-float{
  0%,100%{transform:rotate(-8deg) translateY(0)}
  50%{transform:rotate(-5deg) translateY(-16px)}
}

/* ---- blueprint: drafting rules, construction geometry ---- */
.tdp-deco[data-tdp-skin="spec"]{ overflow:visible; }
.tdp-deco[data-tdp-skin="spec"] .d-rule{display:block;height:1px;background:var(--tdp-accent);opacity:.42}
.tdp-deco[data-tdp-skin="spec"] .d-rule::before,
.tdp-deco[data-tdp-skin="spec"] .d-rule::after{
  content:"";position:absolute;top:-5px;width:1px;height:11px;background:var(--tdp-accent)
}
.tdp-deco[data-tdp-skin="spec"] .d-rule::before{left:0}
.tdp-deco[data-tdp-skin="spec"] .d-rule::after{right:0}
.tdp-deco[data-tdp-skin="spec"] .r-a{left:2%;right:2%;top:96px}
.tdp-deco[data-tdp-skin="spec"] .r-b{left:-4%;width:52%;top:44%}
.tdp-deco[data-tdp-skin="spec"] .r-c{left:56%;right:-4%;top:71%}
.tdp-deco[data-tdp-skin="spec"] .d-rule.r-b,.tdp-deco[data-tdp-skin="spec"] .d-rule.r-c{
  background:repeating-linear-gradient(90deg,var(--tdp-accent) 0 14px,transparent 14px 18px,var(--tdp-accent) 18px 22px,transparent 22px 34px);
  opacity:.3;height:1px
}
.tdp-deco[data-tdp-skin="spec"] .d-tick{
  display:block;width:13px;height:13px;background:
    linear-gradient(var(--tdp-accent),var(--tdp-accent)) center/13px 1px no-repeat,
    linear-gradient(var(--tdp-accent),var(--tdp-accent)) center/1px 13px no-repeat;
  opacity:.55
}
.tdp-deco[data-tdp-skin="spec"] .t1{left:-1px;top:26%}
.tdp-deco[data-tdp-skin="spec"] .t2{right:-1px;top:26%}
.tdp-deco[data-tdp-skin="spec"] .t3{left:-1px;top:63%}
.tdp-deco[data-tdp-skin="spec"] .t4{right:-1px;top:63%}
.tdp-deco[data-tdp-skin="spec"] .d-geo{display:block;color:var(--tdp-accent);opacity:.72}
.tdp-deco[data-tdp-skin="spec"] .d-geo.p2{left:-13%;top:21%;width:168px;height:246px;opacity:.58}
.tdp-deco[data-tdp-skin="spec"] .d-geo.p3{left:-11%;top:55%;width:180px;height:180px;opacity:.62}
.tdp-deco[data-tdp-skin="spec"] .d-geo.p4{right:-11%;top:69%;width:172px;height:226px;opacity:.58}
@media(max-width:1180px){
  .tdp-deco[data-tdp-skin="spec"] .d-geo.p2,
  .tdp-deco[data-tdp-skin="spec"] .d-geo.p3,
  .tdp-deco[data-tdp-skin="spec"] .d-geo.p4{display:none}
}
.tdp-deco[data-tdp-skin="spec"] .d-diag{
  display:block;height:1px;opacity:.24;
  background-image:linear-gradient(90deg,var(--tdp-accent) 0 10px,rgba(16,18,21,0) 10px 20px);
  background-size:20px 1px;background-repeat:repeat-x;
  transform-origin:0 50%;
}
.tdp-deco[data-tdp-skin="spec"] .d-diag.a{left:-9%;width:132%;top:33%;transform:rotate(-8.5deg)}
.tdp-deco[data-tdp-skin="spec"] .d-diag.b{left:-9%;width:132%;top:63.5%;transform:rotate(6deg)}
.tdp-deco[data-tdp-skin="spec"] .d-dim{
  display:block;left:5%;right:5%;top:53.5%;height:1px;opacity:.62;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'><path d='M10 0 L0 4.5 L10 9 Z' fill='%2316181a'/></svg>") left center/10px 9px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'><path d='M0 0 L10 4.5 L0 9 Z' fill='%2316181a'/></svg>") right center/10px 9px no-repeat,
    linear-gradient(var(--tdp-rule-soft),var(--tdp-rule-soft)) center/calc(100% - 14px) 1px no-repeat;
}
.tdp-deco[data-tdp-skin="spec"] .d-dim::before,
.tdp-deco[data-tdp-skin="spec"] .d-dim::after{
  content:"";position:absolute;top:-9px;width:1px;height:19px;background:var(--tdp-rule-soft)
}
.tdp-deco[data-tdp-skin="spec"] .d-dim::before{left:0}
.tdp-deco[data-tdp-skin="spec"] .d-dim::after{right:0}

/* ---- machine: radar dish + corner brackets ---- */
.tdp-deco[data-tdp-skin="hud"] .d-hud{
  display:block;position:absolute;right:-5%;top:12%;width:350px;height:350px;border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 58%,transparent 76%);
  mask:radial-gradient(circle,#000 58%,transparent 76%);
}
.tdp-deco[data-tdp-skin="hud"] .d-hud::before{
  content:"";position:absolute;inset:-12%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 258deg,rgba(255,68,56,.05) 296deg,
    rgba(255,68,56,.34) 350deg,rgba(255,190,175,.80) 359deg,transparent 360deg);
  animation:tdp-radar-sweep 6s linear infinite;
}
.tdp-deco[data-tdp-skin="hud"] .d-hud .r1,
.tdp-deco[data-tdp-skin="hud"] .d-hud .r2,
.tdp-deco[data-tdp-skin="hud"] .d-hud .r3{position:absolute;border-radius:50%;border:1px solid rgba(159,216,255,.22)}
.tdp-deco[data-tdp-skin="hud"] .d-hud .r1{inset:0}
.tdp-deco[data-tdp-skin="hud"] .d-hud .r2{inset:15%;border-style:dashed;border-color:rgba(159,216,255,.32)}
.tdp-deco[data-tdp-skin="hud"] .d-hud .r3{inset:33%;border-color:rgba(255,83,71,.45)}
@keyframes tdp-radar-sweep{to{transform:rotate(360deg)}}
.tdp-deco[data-tdp-skin="hud"] .d-bracket{
  display:block;width:28px;height:28px;border:1.5px solid rgba(159,216,255,.45);
}
.tdp-deco[data-tdp-skin="hud"] .b1{left:-3px;top:64px;border-right:0;border-bottom:0}
.tdp-deco[data-tdp-skin="hud"] .b2{right:-3px;top:64px;border-left:0;border-bottom:0}
.tdp-deco[data-tdp-skin="hud"] .b3{left:-3px;bottom:34px;border-right:0;border-top:0}
.tdp-deco[data-tdp-skin="hud"] .b4{right:-3px;bottom:34px;border-left:0;border-top:0}

/* ---------- 4.  type -------------------------------------------------
   Base line-height / weight / wrapping match the five-skin page's .title
   (line-height:1.02, 700, text-wrap:balance). Each style overrides its own
   font-size and line-height below. */
.tdp-title{
  position:relative; margin:0; font-family:var(--tdp-display); font-weight:700;
  line-height:1.02; text-wrap:balance;
}
.tdp-title--glitch{
  text-transform:uppercase; letter-spacing:-.035em;
  font-size:clamp(40px,7.6vw,92px);
  /* Brightness: at 0% the base text drops to 55% white, from 100% up it is
     the source page's pure white. calc(N * var(--tdp-fx) * 1%) is how an
     unitless slider number becomes a percentage. */
  color:rgba(255,255,255,calc(.55 + .45 * var(--tdp-fx) * .01));
  text-shadow:0 0 26px rgba(0,240,255,calc(.5 * var(--tdp-fx) * .01)),
    0 0 70px rgba(138,43,226,calc(.35 * var(--tdp-fx) * .01));
}
.tdp-title--glitch::before,
.tdp-title--glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  text-transform:uppercase; letter-spacing:inherit;
  pointer-events:none; user-select:none; text-shadow:none;
  /* Chromatic-aberration power: both ghost layers fade out at 0% and match
     the source page from 100% up. */
  filter:opacity(calc(var(--tdp-fx) * 1%));
}
.tdp-title--glitch::before{
  color:var(--tdp-accent); clip-path:inset(9% 0 78% 0); transform:translate(-3px,0);
  mix-blend-mode:screen; animation:tdp-glitch-a 4.3s steps(1,end) infinite;
}
.tdp-title--glitch::after{
  color:var(--tdp-accent2); clip-path:inset(72% 0 12% 0); transform:translate(3px,0);
  mix-blend-mode:screen; animation:tdp-glitch-b 5.9s steps(1,end) infinite;
}
@keyframes tdp-glitch-a{
  0%,100%{ transform:translate(-3px,0); clip-path:inset(9% 0 78% 0); opacity:.9 }
  7%,74%{ transform:translate(-3px,0); clip-path:inset(9% 0 78% 0); opacity:.9 }
  75%{ transform:translate(-11px,-4px); clip-path:inset(2% 0 61% 0); opacity:1 }
  77%{ transform:translate(9px,3px); clip-path:inset(34% 0 40% 0); opacity:1 }
  79%{ transform:translate(-6px,1px); clip-path:inset(14% 0 72% 0); opacity:1 }
  81%{ transform:translate(13px,-2px); clip-path:inset(46% 0 30% 0); opacity:1 }
  83%{ transform:translate(-4px,2px); clip-path:inset(22% 0 58% 0); opacity:1 }
  85%{ transform:translate(2px,-5px); clip-path:inset(60% 0 22% 0); opacity:1 }
  87%{ transform:translate(-3px,0); clip-path:inset(9% 0 78% 0); opacity:.9 }
}
@keyframes tdp-glitch-b{
  0%,100%{ transform:translate(3px,0); clip-path:inset(72% 0 12% 0); opacity:.9 }
  9%,78%{ transform:translate(3px,0); clip-path:inset(72% 0 12% 0); opacity:.9 }
  79%{ transform:translate(12px,4px); clip-path:inset(58% 0 8% 0); opacity:1 }
  81%{ transform:translate(-10px,-3px); clip-path:inset(76% 0 2% 0); opacity:1 }
  83%{ transform:translate(7px,-1px); clip-path:inset(64% 0 20% 0); opacity:1 }
  85%{ transform:translate(-14px,2px); clip-path:inset(80% 0 4% 0); opacity:1 }
  87%{ transform:translate(3px,0); clip-path:inset(72% 0 12% 0); opacity:.9 }
}

/* ---------- 5.  crayon title -----------------------------------------
   Recipe from the five-skin page's storybook .title:
     font-size clamp(34px,6.4vw,74px) / line-height 1.12 / letter-spacing -.01em
     filter:url(#crayon-3)  (feTurbulence + feDisplacementMap smudged edge)
     text-shadow:1px 2px 0 rgba(255,255,255,.85)
     ::after is the 56% wide, 15px tall wax underline (filter:url(#crayon-2))
   This version adds a grain layer (::before) whose density is --tdp-fx. */
.tdp-title--crayon{
  font-weight:700; letter-spacing:-.01em; color:#4a3a2c;
  font-size:clamp(34px,6.4vw,74px); line-height:1.12;
  filter:url(#tdp-crayon-3);
  text-shadow:1px 2px 0 rgba(255,255,255,.85);
}
.tdp-title--crayon::after{
  content:""; position:absolute; left:2%; bottom:-16px; width:56%; height:15px;
  background:linear-gradient(90deg,#ff8fb1,#ffcf4d 60%,#6cc24a);
  border-radius:44% 56% 52% 48%/62% 46% 54% 38%;
  filter:url(#tdp-crayon-2); transform:rotate(-1deg);
  opacity:calc(.85 * var(--tdp-fx) * 1%);
}
.tdp-title--crayon::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:calc(.22 * var(--tdp-fx) * 1%);
  mix-blend-mode:multiply; background-size:120px 120px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
}

/* ---------- 6.  gold title -------------------------------------------
   From the five-skin page's midnight .title: font-weight 400,
   line-height 1.16, font-size clamp(36px,6.2vw,72px) and an eight-stop
   metal gradient clipped into the glyphs. Contrast is --tdp-fx:
   contrast(100%) is the source page, 0% goes flat grey, 200% is harder. */
.tdp-title--gold{
  font-weight:400; letter-spacing:.004em; line-height:1.16;
  font-size:clamp(36px,6.2vw,72px);
  background:linear-gradient(100deg,#2a1f08 0%,#fff4cf 14%,#c9a227 28%,#6b5416 40%,
    #fff6d8 52%,#8a6a1f 66%,#3a2c0f 80%,#c9a227 100%);
  background-size:100% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:contrast(calc(var(--tdp-fx) * 1%)) drop-shadow(0 0 28px rgba(212,175,55,.3));
}

/* ---------- 6b.  drafting headline (blueprint) -------------------------
   From the five-skin page's spec .title: uppercase, k-035 tracking, near
   black ink, and a bottom rule whose ends are two little arrow heads --
   the whole thing reads as a drawing title block. The arrow colour is a
   literal (#16181a) because it lives inside a data-URI, and that colour is
   exactly the spec skin's --mk. */
.tdp-title--draft{
  text-transform:uppercase; font-weight:700; letter-spacing:-.035em;
  font-size:clamp(38px,7vw,84px); color:#0c0e10;
  padding-bottom:30px; border-bottom:1px solid #16181a;
}
.tdp-title--draft::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  opacity:calc(var(--tdp-fx) * 1%);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'><path d='M10 0 L0 4.5 L10 9 Z' fill='%2316181a'/></svg>") left center/10px 9px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='9'><path d='M0 0 L10 4.5 L0 9 Z' fill='%2316181a'/></svg>") right center/10px 9px no-repeat,
    linear-gradient(var(--tdp-rule-soft,#a9ada8),var(--tdp-rule-soft,#a9ada8)) center/calc(100% - 14px) 1px no-repeat;
}

/* ---------- 6c.  stainless headline (machine) --------------------------
   From the five-skin page's hud .title: condensed uppercase satin steel
   gradient clipped into the glyphs, plus a red underline that fades out.
   --tdp-fx drives brightness (100% == the source page). */
.tdp-title--steel{
  text-transform:uppercase; font-weight:600; letter-spacing:-.012em; line-height:.99;
  font-size:clamp(38px,7.4vw,88px);
  background-image:var(--tdp-steel,linear-gradient(180deg,#ffffff 0%,#d3dfea 10%,#5f7385 26%,#fbfdff 41%,#8296a8 56%,#46586a 73%,#dbe6ef 88%,#f2f7fb 100%));
  background-size:100% 1.06em; background-repeat:repeat-y;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:brightness(calc(.55 + .45 * var(--tdp-fx) * .01))
    drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 3px 9px rgba(0,0,0,.7));
}
.tdp-title--steel::after{
  content:""; position:absolute; left:0; bottom:-20px; width:72%; height:1px;
  background:linear-gradient(90deg,var(--tdp-accent),rgba(255,68,56,.15) 55%,transparent);
  box-shadow:0 0 14px rgba(255,68,56,calc(.7 * var(--tdp-fx) * .01));
}

/* ---------- 7.  theme panels -----------------------------------------
   One .tdp-panel plus five --kind modifiers, each copied rule by rule from
   the matching block of the five-skin page (only A2's scanline spacing is
   loosened on purpose -- see the note there).
   Padding is NOT on .tdp-panel: the five panels differ a lot (the drafting
   one has no vertical padding at all), so each --kind owns its own. */
.tdp-panel{ position:relative; border-radius:var(--tdp-radius); }
.tdp-panel__body{ margin:0; line-height:1.65; }
.tdp-panel__body > :first-child{ margin-top:0; }
.tdp-panel__body > :last-child{ margin-bottom:0; }

/* ---- A1/A2  cyber . hologram dialogue box  (source: .lede) ----------
   A1: the 1.0.3 rule already carried the source values; what was missing
       were the two things that actually sell a hologram -- the blurred
       light cone right below the box (::after) and the 7s brightness
       flicker (holoFlicker). With both back it reads "glowing edges,
       translucent middle" instead of a flat filled slab.
   A2: the source scanlines are 1px lines every 3px (4px period). That works
       over the page's own colour field, but plugin panels usually sit inside
       a flat Elementor container, where a 4px period reads as one solid
       fill. Loosened here to 1px / 6px (7px period) and dimmed .13 -> .10. */
.tdp-panel--holo{
  padding:26px 28px 24px;
  color:#c9eeff;
  /* 1.0.7: a clean translucent hologram. The user asked for this twice, so it
     is now explicit: NO scanlines, NO dashed outline, NO light cone -- nothing
     bar-shaped at all, just tinted glass, a border and a glow. The fill got
     lighter too (.56 -> .34 over the gradient) so the page shows through. */
  background:linear-gradient(180deg,rgba(0,240,255,.10),rgba(0,240,255,.015) 46%,rgba(138,43,226,.09)),
    rgba(8,18,32,.34);
  border:1px solid rgba(0,240,255,.42);
  box-shadow:inset 0 0 34px -12px rgba(0,240,255,.65),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 46px -10px rgba(0,240,255,.35), 0 0 110px -30px rgba(138,43,226,.6);
  backdrop-filter:blur(7px) saturate(1.3);
  -webkit-backdrop-filter:blur(7px) saturate(1.3);
  /* the flicker used to dip to .55 four times inside 7s -- far too busy.
     Now: two shallow dips over 13s, just enough to read as a hologram. */
  animation:tdp-holo-flicker 13s steps(1,end) infinite;
}
@keyframes tdp-holo-flicker{
  0%,100%{ opacity:1 }
  46%,47%{ opacity:.88 }
  78%{ opacity:.94 }
}

/* ---- storybook . paper card  (source: .card: tape + crayon edge + shadow)
   ::before uses filter:url(#tdp-crayon-1), and those SVG filter defs are
   printed by text.php -- which used to print them only in the crayon-title
   branch. So a note panel on its own referenced a filter id that did not
   exist and its border came out as a dead-straight line. render() now
   prints the defs for both cases. */
.tdp-panel--note{
  padding:30px 24px 32px; border-radius:22px;
  background:var(--tdp-surface); color:#5b4736;
  transform:rotate(-.5deg);
  box-shadow:0 8px 0 rgba(74,58,44,.14);
}
.tdp-panel--note::after{
  content:""; position:absolute; left:26px; top:-13px; width:64px; height:22px;
  background:rgba(255,207,77,.72); transform:rotate(-3deg); pointer-events:none;
  box-shadow:0 1px 2px rgba(90,70,50,.18);
}

/* ---- A4  blueprint . drafting callout  (source: .lede) --------------
   The source is "one rule on the left plus a short bold end tick at the top
   and bottom", with no vertical padding at all. In 1.0.3 the shared
   .tdp-panel padding (26px/28px) inflated it into a box and pushed the end
   ticks outside the padding edge, so the callout lost its edge entirely. */
.tdp-panel--lab{
  /* 1.0.7: the user wants an actual border here, not only the drafting rule on
     the left. So: a full 1px box in the drafting ink, normal padding, and the
     two 14px end ticks stay put -- with a box around it they read as the
     corner marks of a title block. */
  padding:26px 28px;
  background:transparent; color:#3d4145;
  border:1px solid var(--tdp-accent);
}
.tdp-panel--lab::before,
.tdp-panel--lab::after{
  content:""; position:absolute; left:-1px; width:1px; height:14px; background:var(--tdp-accent);
}
.tdp-panel--lab::before{ top:0 }
.tdp-panel--lab::after{ bottom:0 }

/* ---- midnight . gold inner frame  (source: .lede) ------------------- */
.tdp-panel--gold{
  padding:26px 30px; border-radius:0;
  color:#e6d9b8;
  background:linear-gradient(180deg,rgba(60,42,96,.76),rgba(26,17,46,.84));
  border:1px solid rgba(212,175,55,.45);
  box-shadow:inset 0 0 0 4px rgba(212,175,55,.09),
    inset 0 0 46px -16px rgba(212,175,55,.55),
    0 26px 70px -34px rgba(0,0,0,.95);
}
.tdp-panel--gold::before{
  content:""; position:absolute; inset:6px; border:1px solid rgba(247,231,163,.34); pointer-events:none;
}
.tdp-panel--gold::after{
  content:"\2726"; position:absolute; left:50%; top:-12px; transform:translateX(-50%);
  font-size:14px; line-height:1; color:rgba(247,231,163,.95);
  background:#0f0920; padding:0 10px;
}

/* ---- A3  machine . black glass  (source: .card) ---------------------
   The source uses the classic padding-box / border-box pair:
     inner = translucent glass fill, outer = 145deg asymmetric rim light
     (bright at the top-left, ice blue at the bottom-right).
   1.0.3 had the fill too opaque (.78/.86) and the rim light too weak
   (.50 -> now .54), and it was missing the source's HUD corner brackets
   and steel metal type -- hence "does not look like black glass".
   Also restored here: contain:paint and the no-backdrop-filter fallback. */
.tdp-panel--glass{
  padding:30px 26px 32px; border-radius:4px;
  color:#dfeaf4; border:1px solid transparent;
  background:
    linear-gradient(160deg,rgba(48,60,76,.58),rgba(20,27,37,.70)) padding-box,
    linear-gradient(145deg,rgba(255,255,255,.54) 0%,rgba(255,255,255,.10) 32%,
      rgba(255,255,255,.04) 60%,rgba(159,216,255,.44) 100%) border-box;
  -webkit-backdrop-filter:blur(11px) saturate(135%) brightness(1.06);
  backdrop-filter:blur(11px) saturate(135%) brightness(1.06);
  contain:paint;
  box-shadow:0 28px 70px -34px rgba(0,0,0,.9);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tdp-panel--glass{
    background:linear-gradient(160deg,rgba(34,43,56,.95),rgba(16,21,30,.96)) padding-box,
      linear-gradient(145deg,rgba(255,255,255,.54),rgba(159,216,255,.44)) border-box;
  }
}
/* HUD corner brackets: eight 16px arms, two per corner */
.tdp-panel--glass::before{
  content:""; position:absolute; inset:7px; pointer-events:none; opacity:.8;
  --bk:rgba(159,216,255,.55);
  background-image:
    linear-gradient(var(--bk),var(--bk)),linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)),linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)),linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)),linear-gradient(var(--bk),var(--bk));
  background-repeat:no-repeat;
  background-size:16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px,16px 1px,1px 16px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
}
/* Metal type: heading-level elements and strong share the steel gradient */
.tdp-panel--glass h1,.tdp-panel--glass h2,.tdp-panel--glass h3,
.tdp-panel--glass h4,.tdp-panel--glass strong{
  background-image:var(--tdp-steel,linear-gradient(180deg,#ffffff 0%,#d3dfea 10%,#5f7385 26%,
    #fbfdff 41%,#8296a8 56%,#46586a 73%,#dbe6ef 88%,#f2f7fb 100%));
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ---------- 8.  ------------------------------------------------------- */
.tdp-term{
  font-family:var(--tdp-mono);
  /* 1.0.7: the cyber terminal is the SAME translucent blue hologram as the
     theme text panel -- tinted glass, no bars, glowing type. The other four
     skins override background/shadow below, so they are untouched. */
  border:1px solid rgba(0,240,255,.42);
  background:linear-gradient(180deg,rgba(0,240,255,.10),rgba(0,240,255,.015) 46%,rgba(138,43,226,.09)),
    rgba(8,18,32,.34);
  box-shadow:inset 0 0 34px -12px rgba(0,240,255,.65),
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 46px -10px rgba(0,240,255,.35), 0 0 110px -30px rgba(138,43,226,.6);
  backdrop-filter:blur(7px) saturate(1.3);
  -webkit-backdrop-filter:blur(7px) saturate(1.3);
}
/* fluorescent type: the cyan glow the reference page puts on the cyber terminal */
.tdp[data-tdp-skin="cyber"] .tdp-term__body{
  text-shadow:0 0 12px rgba(0,240,255,.5), 0 0 30px rgba(0,240,255,.22);
}
.tdp[data-tdp-skin="story"] .tdp-term{ border-color:rgba(74,58,44,.35); background:#fffdf7; box-shadow:4px 4px 0 rgba(74,58,44,.14); }
.tdp[data-tdp-skin="spec"] .tdp-term{ border-color:#16181a; background:#fff; box-shadow:none; }
.tdp[data-tdp-skin="tarot"] .tdp-term{ border-color:rgba(212,175,55,.45); background:rgba(15,9,28,.85); box-shadow:0 0 40px -18px rgba(212,175,55,.6); }
.tdp[data-tdp-skin="hud"] .tdp-term{ border-color:rgba(159,216,255,.28); background:rgba(10,14,20,.85); box-shadow:0 0 40px -18px rgba(159,216,255,.5); }

.tdp-term__bar{
  display:flex; align-items:center; gap:7px; padding:9px 13px;
  border-bottom:1px solid var(--tdp-line); background:rgba(0,240,255,.07);
}
.tdp-term__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(0,240,255,.34); }
.tdp-term__bar i:first-child{ background:rgba(255,45,120,.6) }
.tdp-term__bar i:nth-child(2){ background:rgba(198,255,46,.5) }
.tdp-term__bar em{
  margin-left:8px; font-style:normal; font-size:10.5px; letter-spacing:.14em; color:var(--tdp-dim);
}
.tdp-term__body{
  margin:0; padding:16px 17px 18px; min-height:110px;
  font-size:12.5px; line-height:1.8; color:var(--tdp-accent);
  white-space:pre-wrap; word-break:break-word;
}
.tdp[data-tdp-skin="story"] .tdp-term__body,
.tdp[data-tdp-skin="spec"] .tdp-term__body{ color:#4a3a2c; }
.tdp[data-tdp-skin="spec"] .tdp-term__body{ color:#16181a; }
.tdp[data-tdp-skin="tarot"] .tdp-term__body{ color:#e6d9b8; }
.tdp[data-tdp-skin="hud"] .tdp-term__body{ color:#cfe6f5; }
.tdp-term__body .tdp-p{ color:var(--tdp-accent3); }
.tdp-term__body .tdp-d{ opacity:.6; }
.tdp-cursor{
  display:inline-block; width:8px; height:14px; margin-left:2px; vertical-align:-2px;
  background:var(--tdp-accent); animation:tdp-blink 1.05s steps(1,end) infinite;
}
@keyframes tdp-blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }

/* ---------- 9.  ----------------------------------------------------- */
.tdp-stats{
  display:grid; grid-template-columns:repeat(var(--tdp-cols,4),minmax(0,1fr));
  gap:var(--tdp-gap,1px);
  margin:0; padding:0; list-style:none;
  /* Frame colour comes from the selected "divider frame" look below
     (--tdp-frame), and can still be overridden with the colour / width
     controls (--tdp-frame-color / --tdp-frame-w). */
  /* The final fallback matters: without it a frame class that does not define
     --tdp-frame (box / none) makes the whole border declaration invalid at
     computed-value time, i.e. "box" silently rendered with no border at all. */
  border-top:var(--tdp-frame-w,1px) solid var(--tdp-frame-color,var(--tdp-frame,var(--tdp-line)));
  border-bottom:var(--tdp-frame-w,1px) solid var(--tdp-frame-color,var(--tdp-frame,var(--tdp-line)));
}
.tdp-stat{ padding:22px 14px 20px; }
.tdp-stat__v{
  display:block; font-family:var(--tdp-display); font-weight:700;
  font-size:clamp(24px,3.2vw,40px); line-height:1; font-variant-numeric:tabular-nums;
  filter:brightness(calc(.6 + .4 * var(--tdp-fx) * .01));
}
.tdp-stat__l{
  display:block; margin-top:9px; font-family:var(--tdp-mono); font-size:10.5px;
  letter-spacing:var(--tdp-track); text-transform:uppercase; color:var(--tdp-dim);
}
.tdp-stats--div-line .tdp-stat{ border-right:1px solid var(--tdp-line); }
.tdp-stats--div-line .tdp-stat:last-child{ border-right:0; }
.tdp-stats--div-hatch .tdp-stat{
  border-right:1px solid var(--tdp-line);
  background-image:repeating-linear-gradient(45deg,var(--tdp-line) 0 1px,transparent 1px 5px);
}
.tdp-stats--div-hatch .tdp-stat:last-child{ border-right:0; }

/* ---------- 9a. divider frame : one class per source-page look ---------- */

/* spec / drafting: two black rules + light column rules + gap 0
   (.stats{border-color:var(--mk);gap:0} .stat{border-right:1px solid var(--line)}) */
.tdp-frame--spec .tdp-stats{ --tdp-frame:var(--tdp-mk,#16181a); --tdp-gap:0; }
.tdp-frame--spec .tdp-stat{ padding:22px 16px 20px; border-right:1px solid var(--tdp-line); }
.tdp-frame--spec .tdp-stat:last-child{ border-right:0; }

/* cyber: two cyan fluorescent rules (.stats{border-color:rgba(0,240,255,.24)}).
   The source page only sets the colour; the faint bloom is what makes it read
   as "fluorescent", per the user's wording. */
.tdp-frame--cyber .tdp-stats{
  --tdp-frame:rgba(0,240,255,.24);
  box-shadow:0 0 16px -4px rgba(0,240,255,.35);
}

/* story: rounded cloth cards, no band rules (.stats{border:0;gap:10px},
   .stat{border:3px solid #4a3a2c;border-radius:20px;box-shadow:...}) */
.tdp-frame--story{
  --tdp-wax:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014 .72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)' opacity='.55'/%3E%3C/svg%3E");
  --tdp-speck:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  --tdp-streak:repeating-linear-gradient(104deg,#0000 0 4px,#ffffff3d 4px 5px,#0000 5px 9px);
}
/* Story cards must never touch: the source page leaves a 10px gutter. A plain
   `gap:var(--tdp-gap)` would collapse them whenever the gap control sits at its
   1px default, so the gutter has a floor and still follows the control above it. */
.tdp-frame--story .tdp-stats{ border:0; gap:max(var(--tdp-gap,10px), 10px); }
.tdp-frame--story .tdp-stat{
  border:3px solid #4a3a2c; border-radius:20px; padding:18px 16px 16px;
  box-shadow:0 5px 0 rgba(74,58,44,.18); position:relative; overflow:hidden;
  background-image:var(--tdp-streak),var(--tdp-speck),var(--tdp-wax);
  background-size:auto,120px 120px,220px 220px;
  background-blend-mode:normal,multiply,multiply;
}
.tdp-frame--story .tdp-stat:nth-child(1){ background-color:#eaf7dd; }
.tdp-frame--story .tdp-stat:nth-child(2){ background-color:#ffe9f1; }
.tdp-frame--story .tdp-stat:nth-child(3){ background-color:#e2f4fc; }
.tdp-frame--story .tdp-stat:nth-child(4){ background-color:#fff3d4; }

/* tarot: two gilded rules (.stats{border-color:rgba(212,175,55,.30)}) */
.tdp-frame--tarot .tdp-stats{ --tdp-frame:rgba(212,175,55,.30); }

/* hud: two pale blue rules (.stats{border-color:rgba(159,216,255,.20)}) */
.tdp-frame--hud .tdp-stats{ --tdp-frame:rgba(159,216,255,.20); }

/* none / box -- "box" is not in the source page, it is the extra
   "frame it like a table" option. */
.tdp-frame--none .tdp-stats{ border:0; }
.tdp-frame--none .tdp-stat{ border-right:0; }
.tdp-frame--box .tdp-stats{
  border-left:var(--tdp-frame-w,1px) solid var(--tdp-frame-color,var(--tdp-frame,var(--tdp-line)));
  border-right:var(--tdp-frame-w,1px) solid var(--tdp-frame-color,var(--tdp-frame,var(--tdp-line)));
}

/* ---------- 9b. number style : one class per source-page look ---------- */
.tdp-numbers--cyber .tdp-stat__v{
  color:rgba(255,255,255,calc(.55 + .45 * var(--tdp-fx) * .01));
  text-shadow:
    calc(2px * var(--tdp-fx) * .01) 0 var(--tdp-accent2),
    calc(-2px * var(--tdp-fx) * .01) 0 var(--tdp-accent),
    0 0 30px rgba(0,240,255,calc(.6 * var(--tdp-fx) * .01));
}
.tdp-numbers--story .tdp-stat__v{ color:#4a3a2c; font-weight:700; }
.tdp-numbers--story .tdp-stat__l{ color:#7a6551; letter-spacing:.1em; }
.tdp-numbers--spec .tdp-stat__v{ color:#0c0e10; font-weight:600; letter-spacing:-.04em; }
.tdp-numbers--spec .tdp-stat__l{ letter-spacing:.14em; }
.tdp-numbers--tarot .tdp-stat__v{
  font-weight:400;
  background:linear-gradient(180deg,#fff6d8 0%,#e8cd7c 30%,#c9a227 55%,#6b5416 80%,#2a1f08 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.tdp-numbers--tarot .tdp-stat__l{ color:rgba(230,199,110,.82); }
.tdp-numbers--hud .tdp-stat__v{
  font-family:var(--tdp-mono); font-weight:500; letter-spacing:-.02em;
  background:linear-gradient(180deg,#fdfeff 0%,#d3dfea 10%,#5f7385 26%,#fbfdff 41%,
    #8296a8 56%,#46586a 73%,#dbe6ef 88%,#f2f7fb 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.tdp-numbers--hud .tdp-stat__l{ letter-spacing:.18em; }
.tdp-numbers--hud .tdp-stat__v::before{ content:"[ "; color:var(--tdp-accent); -webkit-text-fill-color:var(--tdp-accent); font-size:.55em; vertical-align:.18em; }
.tdp-numbers--hud .tdp-stat__v::after{ content:" ]"; color:var(--tdp-accent); -webkit-text-fill-color:var(--tdp-accent); font-size:.55em; vertical-align:.18em; }

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

/* ---------- 10.  ------------------------------------------------------ */
.tdp-btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:var(--tdp-radius); overflow:hidden; isolation:isolate;
  font-family:var(--tdp-mono); font-size:12px; letter-spacing:var(--tdp-track);
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  border:1px solid var(--tdp-btn-bd,var(--tdp-line));
  color:var(--tdp-ink); background:var(--tdp-btn-bg,transparent);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s, background-color .35s;
}
.tdp-btn--sm{ padding:9px 16px; font-size:11px }
.tdp-btn--lg{ padding:17px 30px; font-size:13px }
.tdp-btn:hover{ transform:translateY(-2px) }
.tdp-btn__a{ transition:transform .35s cubic-bezier(.16,1,.3,1) }
.tdp-btn:hover .tdp-btn__a{ transform:translateX(4px) }
.tdp-btn--sweep::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);
  transform:translate3d(-130%,0,0) skewX(-18deg);
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}
.tdp-btn--sweep:hover::before{ transform:translate3d(130%,0,0) skewX(-18deg) }

/*  */
.tdp[data-tdp-skin="cyber"] .tdp-btn--solid{
  background:linear-gradient(92deg,var(--tdp-accent),#4de3ff 44%,#8a2be2);
  color:#03060c; border-color:transparent; font-weight:700;
  box-shadow:0 0 30px -6px rgba(0,240,255,.7);
}
.tdp[data-tdp-skin="cyber"] .tdp-btn--solid:hover{ box-shadow:0 0 46px -4px rgba(0,240,255,.95) }
.tdp[data-tdp-skin="cyber"] .tdp-btn--ghost{ border-color:rgba(255,45,120,.5); color:#ffd9e7; background:rgba(255,45,120,.07) }
.tdp[data-tdp-skin="cyber"] .tdp-btn--ghost:hover{ background:rgba(255,45,120,.18) }

.tdp[data-tdp-skin="story"] .tdp-btn{
  border-radius:999px; border:3px solid #4a3a2c; font-weight:700;
  text-transform:none; box-shadow:0 5px 0 #4a3a2c;
}
.tdp[data-tdp-skin="story"] .tdp-btn--solid{ background:linear-gradient(180deg,#ffa3c0,#ff8fb1); color:#5b2f3f }
.tdp[data-tdp-skin="story"] .tdp-btn--ghost{ background:#fffdf7; color:#4a3a2c }
.tdp[data-tdp-skin="story"] .tdp-btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 #4a3a2c }
.tdp[data-tdp-skin="story"] .tdp-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #4a3a2c }

.tdp[data-tdp-skin="spec"] .tdp-btn{ border-color:#16181a; border-radius:0 }
.tdp[data-tdp-skin="spec"] .tdp-btn--solid{ background:#111315; color:#f4f4f1 }
.tdp[data-tdp-skin="spec"] .tdp-btn--ghost:hover{
  background-image:repeating-linear-gradient(45deg,rgba(16,18,21,.3) 0 1px,transparent 1px 4px);
}
.tdp[data-tdp-skin="spec"] .tdp-btn:hover{ box-shadow:4px 4px 0 rgba(16,18,21,.14) }

.tdp[data-tdp-skin="tarot"] .tdp-btn{
  border-color:rgba(212,175,55,.62); border-radius:2px;
  background:linear-gradient(180deg,rgba(212,175,55,.18),rgba(212,175,55,.05));
}
.tdp[data-tdp-skin="tarot"] .tdp-btn--solid{
  background:linear-gradient(180deg,#f7e7a3,#d4af37 55%,#a9822a);
  color:#1b1226; border-color:transparent; font-weight:700;
}
.tdp[data-tdp-skin="tarot"] .tdp-btn:hover{ box-shadow:0 0 30px -8px rgba(212,175,55,.75) }

.tdp[data-tdp-skin="hud"] .tdp-btn--solid{
  background:linear-gradient(180deg,#ff6b5f,var(--tdp-accent) 55%,#c22b21);
  color:#120507; border-color:transparent; font-weight:700;
  box-shadow:0 0 34px -10px rgba(255,83,71,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
.tdp[data-tdp-skin="hud"] .tdp-btn--ghost:hover{ border-color:var(--tdp-accent2); box-shadow:0 0 30px -12px var(--tdp-accent2) }

/* ---------- 11.  /  -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tdp *, .tdp *::before, .tdp *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .tdp-title--glitch::before, .tdp-title--glitch::after{ opacity:0 }
  .tdp-cursor{ animation:none; opacity:1 }
}
@media (forced-colors:active){
  .tdp-title--gold, .tdp[data-tdp-skin="tarot"] .tdp-stat__v,
  .tdp[data-tdp-skin="hud"] .tdp-stat__v{
    -webkit-text-fill-color:CanvasText; color:CanvasText; background:none;
  }
}