/* 3.1.39: Fine-tune extras. More card fills, card edges, corners, tile pictures, tile animations and backgrounds.
   Everything follows the community's own colours (--a / --a2) and switches on <html data-...>. */

/* ================================================================ corners */
html[data-shape="subtle"] { --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-xl: 7px; --r-2xl: 9px; }
html[data-shape="pill"] { --r-sm: 18px; --r-md: 26px; --r-lg: 34px; --r-xl: 40px; --r-2xl: 52px; }
html[data-shape="subtle"] .glyph { border-radius: 6px; }
html[data-shape="pill"] .glyph { border-radius: 50%; }

/* ================================================================ card fills */
[data-surface="frosted"] :is(.glass, .card):not(.flat) {
  background: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.06)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.08); backdrop-filter: blur(30px) saturate(180%) brightness(1.08);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.22);
}
[data-mode="light"][data-surface="frosted"] :is(.glass, .card):not(.flat) { background: linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.55)) padding-box, var(--edge) border-box; }
[data-surface="tinted"] :is(.glass, .card):not(.flat) {
  background: linear-gradient(160deg, color-mix(in oklab, var(--a) 22%, var(--surface)), color-mix(in oklab, var(--a2) 12%, var(--surface))) padding-box, var(--edge) border-box;
}
[data-surface="smoked"] :is(.glass, .card):not(.flat) {
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.42)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
[data-mode="light"][data-surface="smoked"] :is(.glass, .card):not(.flat) { background: linear-gradient(rgba(20,16,40,.08), rgba(20,16,40,.05)) padding-box, var(--edge) border-box; }
[data-surface="gradient"] :is(.glass, .card):not(.flat) {
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 24%, var(--solid)), color-mix(in oklab, var(--a2) 20%, var(--solid))) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-mode="light"][data-surface="gradient"] :is(.glass, .card):not(.flat) {
  background: linear-gradient(135deg, color-mix(in oklab, var(--a) 12%, var(--solid)), color-mix(in oklab, var(--a2) 10%, var(--solid))) padding-box, var(--edge) border-box;
}
[data-surface="floating"] :is(.glass, .card):not(.flat) {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 22px 44px -16px rgba(0,0,0,.7);
}
[data-mode="light"][data-surface="floating"] :is(.glass, .card):not(.flat) { box-shadow: 0 2px 6px rgba(20,16,40,.08), 0 22px 44px -18px rgba(20,16,40,.35); }
[data-surface="paper"] :is(.glass, .card):not(.flat) {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") padding-box, linear-gradient(var(--solid), var(--solid)) padding-box, var(--edge) border-box;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* a picked card edge also shows on the fills that draw their own border (solid, soft, neon, floating, paper) */
html:is([data-border="none"], [data-border="bold"], [data-border="gradient"], [data-border="neon"], [data-border="pulse"], [data-border="pixel"],
  [data-border="raised"], [data-border="rainbow"], [data-border="glow"], [data-border="shadow"], [data-border="rim"], [data-border="thick"], [data-border="offset"]):is([data-surface="solid"], [data-surface="soft"], [data-surface="neon"]) :is(.glass, .card):not(.flat) {
  background: linear-gradient(var(--solid), var(--solid)) padding-box, var(--edge) border-box;
}

/* ================================================================ card edges */
@property --lk-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html[data-border="rainbow"] :is(.glass, .card):not(.flat) {
  --edge: conic-gradient(from var(--lk-ang), var(--a), var(--a2), color-mix(in oklab, var(--a) 40%, #fff), var(--a2), var(--a)); border-width: 2px;
}
html[data-border="rainbow"] :is(.tile, .portal) { animation: lk-spin 6s linear infinite; }
@keyframes lk-spin { to { --lk-ang: 360deg; } }
html[data-border="glow"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(var(--a-12), var(--a-12));
  box-shadow: 0 0 0 1px var(--a-12), 0 10px 34px -8px var(--a-60), var(--shadow);
}
html[data-border="shadow"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(var(--a), var(--a)); border-width: 2px;
  box-shadow: 5px 5px 0 0 color-mix(in oklab, var(--a2) 75%, #000);
}
html[data-border="shadow"] .tile:hover { box-shadow: 7px 7px 0 0 color-mix(in oklab, var(--a2) 75%, #000); }
html[data-border="offset"] :is(.glass, .card):not(.flat):not(.stat) {
  --edge: linear-gradient(var(--a-60), var(--a-60)); outline: 1.5px solid var(--a2-45); outline-offset: 3px;
}
html[data-border="side"] :is(.glass, .card):not(.flat) { box-shadow: inset 4px 0 0 0 var(--a), var(--shadow); }
html[data-border="top"] :is(.glass, .card):not(.flat) { box-shadow: inset 0 3px 0 0 var(--a), var(--shadow); }
html[data-border="inset"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(rgba(0,0,0,.25), rgba(255,255,255,.08));
  box-shadow: inset 0 2px 8px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.06);
}
html[data-mode="light"][data-border="inset"] :is(.glass, .card):not(.flat) { box-shadow: inset 0 2px 8px rgba(20,16,40,.14), inset 0 -1px 0 rgba(255,255,255,.8); --edge: linear-gradient(rgba(20,16,40,.12), rgba(255,255,255,.6)); }
html[data-border="dotted"] :is(.glass, .card):not(.flat):not(.stat) { outline: 2px dotted var(--a-60); outline-offset: -6px; }
html[data-border="rim"] :is(.glass, .card):not(.flat) {
  --edge: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.06) 35%, rgba(255,255,255,.03) 70%, var(--a-30));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--shadow);
}
html[data-mode="light"][data-border="rim"] :is(.glass, .card):not(.flat) { --edge: linear-gradient(180deg, var(--a-45), rgba(20,16,40,.06) 35%, rgba(20,16,40,.04) 70%, var(--a-30)); }
html[data-border="thick"] :is(.glass, .card):not(.flat) { --edge: linear-gradient(var(--a), var(--a)); border-width: 4px; }
/* the outline fill draws a plain border: give it the new edges too */
html[data-surface="outline"]:is([data-border="rainbow"], [data-border="shadow"], [data-border="thick"]) :is(.glass, .card):not(.flat) { border: 2px solid var(--a); }
html[data-surface="outline"][data-border="glow"] :is(.glass, .card):not(.flat) { border-color: var(--a-30); }
@media (prefers-reduced-motion: reduce) { html[data-border="rainbow"] :is(.tile, .portal) { animation: none; } }

/* ================================================================ tile animations */
html[data-tilefx="bounce"] .bento .tile .tileart .ta-svg { animation: tfx-bounce 3.4s ease-in-out infinite !important; }
html[data-tilefx="zoom"] .bento .tile .tileart .ta-svg { animation: tfx-zoom 10s ease-in-out infinite alternate !important; transform-origin: 70% 50%; }
html[data-tilefx="glow"] .bento .tile .tileart .ta-svg { animation: tfx-glow 3.2s ease-in-out infinite !important; }
html[data-tilefx="rainbow"] .bento .tile .tileart .ta-svg { animation: tfx-hue 12s linear infinite !important; }
html[data-tilefx="orbit"] .bento .tile .tileart .ta-svg { animation: tfx-orbit 9s linear infinite !important; }
html[data-tilefx="heartbeat"] .bento .tile .tileart .ta-svg { animation: tfx-beat 2.6s ease-in-out infinite !important; transform-origin: 60% 50%; }
html[data-tilefx="wiggle"] .bento .tile .tileart .ta-svg { animation: tfx-wiggle 4.5s ease-in-out infinite !important; transform-origin: 60% 70%; }
@keyframes tfx-bounce { 0%, 55%, 100% { transform: translateY(0); } 65% { transform: translateY(-11px); } 75% { transform: translateY(0); } 82% { transform: translateY(-4px); } 89% { transform: translateY(0); } }
@keyframes tfx-zoom { from { transform: scale(1); } to { transform: scale(1.16) translateX(-4px); } }
@keyframes tfx-glow { 0%, 100% { filter: drop-shadow(0 0 0 transparent) brightness(1); } 50% { filter: drop-shadow(0 0 14px var(--a)) brightness(1.3); } }
@keyframes tfx-hue { to { filter: hue-rotate(360deg); } }
@keyframes tfx-orbit { from { transform: rotate(0deg) translateX(5px) rotate(0deg); } to { transform: rotate(360deg) translateX(5px) rotate(-360deg); } }
@keyframes tfx-beat { 0%, 45%, 100% { transform: scale(1); } 10% { transform: scale(1.09); } 20% { transform: scale(1); } 30% { transform: scale(1.07); } }
@keyframes tfx-wiggle { 0%, 78%, 100% { transform: rotate(0); } 82% { transform: rotate(-7deg); } 86% { transform: rotate(6deg); } 90% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
html:is([data-tilefx="aurora"], [data-tilefx="glint"], [data-tilefx="ripple"]) .bento .tile::after {
  display: block; opacity: 1; border-radius: 0; transform: none; right: auto; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
html[data-tilefx="aurora"] .bento .tile::after {
  background: linear-gradient(115deg, transparent 15%, color-mix(in oklab, var(--a) 26%, transparent) 35%, color-mix(in oklab, var(--a2) 22%, transparent) 55%, transparent 78%);
  background-size: 300% 100%; animation: tfx-aurora 9s ease-in-out infinite alternate; }
@keyframes tfx-aurora { from { background-position: 0% 0; } to { background-position: 100% 0; } }
html[data-tilefx="glint"] .bento .tile::after {
  background: radial-gradient(closest-side at 86% 18%, rgba(255,255,255,.9), rgba(255,255,255,.25) 12%, transparent 40%) no-repeat,
              conic-gradient(from 0deg at 86% 18%, transparent 0 40deg, rgba(255,255,255,.35) 45deg, transparent 50deg 130deg, rgba(255,255,255,.35) 135deg, transparent 140deg 220deg, rgba(255,255,255,.35) 225deg, transparent 230deg 310deg, rgba(255,255,255,.35) 315deg, transparent 320deg);
  -webkit-mask: radial-gradient(circle at 86% 18%, #000 0 22%, transparent 40%); mask: radial-gradient(circle at 86% 18%, #000 0 22%, transparent 40%);
  animation: tfx-glint 4.2s ease-in-out infinite; }
@keyframes tfx-glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } 90% { opacity: .2; } }
html[data-tilefx="ripple"] .bento .tile::after {
  left: auto; top: 50%; right: 14%; width: 70px; height: 70px; margin-top: -35px; border-radius: 50%; background: none;
  border: 2px solid var(--a-60); animation: tfx-ripple 3s ease-out infinite; }
html[data-tilefx="ripple"] .bento .tile.wide::after { right: 22%; }
@keyframes tfx-ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
html:is([data-tilefx="aurora"], [data-tilefx="glint"], [data-tilefx="ripple"]) .bento .tile:hover::after { transform: none; }
html[data-tilefx="ripple"] .bento .tile:hover::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { html[data-tilefx] .bento .tile .tileart .ta-svg, html[data-tilefx] .bento .tile::after { animation: none !important; } }

/* ================================================================ tile pictures */
html[data-tileart="chrome"] .ta-announce :is(.f, .f2), html[data-tileart="gold"] .ta-announce :is(.f, .f2) { fill: url(#tam-announce); }
html[data-tileart="sketch"] .ta-announce .art, html[data-tileart="ink"] .ta-announce .art { filter: url(#tawb-announce); }
html[data-tileart="chrome"] .ta-gaming :is(.f, .f2), html[data-tileart="gold"] .ta-gaming :is(.f, .f2) { fill: url(#tam-gaming); }
html[data-tileart="sketch"] .ta-gaming .art, html[data-tileart="ink"] .ta-gaming .art { filter: url(#tawb-gaming); }
html[data-tileart="chrome"] .ta-ideas :is(.f, .f2), html[data-tileart="gold"] .ta-ideas :is(.f, .f2) { fill: url(#tam-ideas); }
html[data-tileart="sketch"] .ta-ideas .art, html[data-tileart="ink"] .ta-ideas .art { filter: url(#tawb-ideas); }
html[data-tileart="chrome"] .ta-info :is(.f, .f2), html[data-tileart="gold"] .ta-info :is(.f, .f2) { fill: url(#tam-info); }
html[data-tileart="sketch"] .ta-info .art, html[data-tileart="ink"] .ta-info .art { filter: url(#tawb-info); }
html[data-tileart="chrome"] .ta-lifestyle :is(.f, .f2), html[data-tileart="gold"] .ta-lifestyle :is(.f, .f2) { fill: url(#tam-lifestyle); }
html[data-tileart="sketch"] .ta-lifestyle .art, html[data-tileart="ink"] .ta-lifestyle .art { filter: url(#tawb-lifestyle); }
html[data-tileart="chrome"] .ta-prizes :is(.f, .f2), html[data-tileart="gold"] .ta-prizes :is(.f, .f2) { fill: url(#tam-prizes); }
html[data-tileart="chrome"] .ta-music :is(.f, .f2), html[data-tileart="gold"] .ta-music :is(.f, .f2) { fill: url(#tam-music); }
html[data-tileart="chrome"] .ta-events :is(.f, .f2), html[data-tileart="gold"] .ta-events :is(.f, .f2) { fill: url(#tam-events); }
html[data-tileart="chrome"] .ta-crypto :is(.f, .f2), html[data-tileart="gold"] .ta-crypto :is(.f, .f2) { fill: url(#tam-crypto); }
html[data-tileart="chrome"] .ta-food :is(.f, .f2), html[data-tileart="gold"] .ta-food :is(.f, .f2) { fill: url(#tam-food); }
html[data-tileart="chrome"] .ta-books :is(.f, .f2), html[data-tileart="gold"] .ta-books :is(.f, .f2) { fill: url(#tam-books); }
html[data-tileart="sketch"] .ta-prizes .art, html[data-tileart="ink"] .ta-prizes .art { filter: url(#tawb-prizes); }
html[data-tileart="sketch"] .ta-music .art, html[data-tileart="ink"] .ta-music .art { filter: url(#tawb-music); }
html[data-tileart="sketch"] .ta-events .art, html[data-tileart="ink"] .ta-events .art { filter: url(#tawb-events); }
html[data-tileart="sketch"] .ta-crypto .art, html[data-tileart="ink"] .ta-crypto .art { filter: url(#tawb-crypto); }
html[data-tileart="sketch"] .ta-food .art, html[data-tileart="ink"] .ta-food .art { filter: url(#tawb-food); }
html[data-tileart="sketch"] .ta-books .art, html[data-tileart="ink"] .ta-books .art { filter: url(#tawb-books); }
html[data-tileart="chrome"] .ta-report :is(.f, .f2), html[data-tileart="gold"] .ta-report :is(.f, .f2) { fill: url(#tam-report); }
html[data-tileart="sketch"] .ta-report .art, html[data-tileart="ink"] .ta-report .art { filter: url(#tawb-report); }
html[data-tileart="chrome"] .ta-request :is(.f, .f2), html[data-tileart="gold"] .ta-request :is(.f, .f2) { fill: url(#tam-request); }
html[data-tileart="sketch"] .ta-request .art, html[data-tileart="ink"] .ta-request .art { filter: url(#tawb-request); }
html[data-tileart="chrome"] .ta-shop :is(.f, .f2), html[data-tileart="gold"] .ta-shop :is(.f, .f2) { fill: url(#tam-shop); }
html[data-tileart="sketch"] .ta-shop .art, html[data-tileart="ink"] .ta-shop .art { filter: url(#tawb-shop); }
html[data-tileart="chrome"] .ta-sport :is(.f, .f2), html[data-tileart="gold"] .ta-sport :is(.f, .f2) { fill: url(#tam-sport); }
html[data-tileart="sketch"] .ta-sport .art, html[data-tileart="ink"] .ta-sport .art { filter: url(#tawb-sport); }
html[data-tileart="chrome"] .ta-stage :is(.f, .f2), html[data-tileart="gold"] .ta-stage :is(.f, .f2) { fill: url(#tam-stage); }
html[data-tileart="sketch"] .ta-stage .art, html[data-tileart="ink"] .ta-stage .art { filter: url(#tawb-stage); }
html[data-tileart="chrome"] .ta-support :is(.f, .f2), html[data-tileart="gold"] .ta-support :is(.f, .f2) { fill: url(#tam-support); }
html[data-tileart="sketch"] .ta-support .art, html[data-tileart="ink"] .ta-support .art { filter: url(#tawb-support); }
html[data-tileart="chrome"] .ta-tickets :is(.f, .f2), html[data-tileart="gold"] .ta-tickets :is(.f, .f2) { fill: url(#tam-tickets); }
html[data-tileart="sketch"] .ta-tickets .art, html[data-tileart="ink"] .ta-tickets .art { filter: url(#tawb-tickets); }
html[data-tileart="chrome"] .ta-videos :is(.f, .f2), html[data-tileart="gold"] .ta-videos :is(.f, .f2) { fill: url(#tam-videos); }
html[data-tileart="sketch"] .ta-videos .art, html[data-tileart="ink"] .ta-videos .art { filter: url(#tawb-videos); }
html[data-tileart="chrome"] .ta-zones :is(.f, .f2), html[data-tileart="gold"] .ta-zones :is(.f, .f2) { fill: url(#tam-zones); }
html[data-tileart="sketch"] .ta-zones .art, html[data-tileart="ink"] .ta-zones .art { filter: url(#tawb-zones); }

/* holographic */
html[data-tileart="holo"] .tileart { --ta-o: .9; }
html[data-tileart="holo"] .tileart .ta-bg {
  background: conic-gradient(from 210deg at 80% 45%, #ff6ad5, #c774e8, #ad8cff, #8795e8, #94d0ff, #7af0c8, #ffe29a, #ff6ad5); opacity: .2;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%); mask-image: linear-gradient(100deg, transparent 25%, #000 75%);
}
html[data-tileart="holo"] .tileart :is(.f, .f2) { stroke: rgba(255,255,255,.75); stroke-width: 1.4; }
html[data-tileart="holo"] .tileart .f2 { fill-opacity: .75; }
html[data-tileart="holo"] .tileart .k { stroke: #fff; stroke-width: 2; stroke-opacity: .85; }
html[data-tileart="holo"] .tileart :is(.d, .p, .w) { fill: #fff; stroke: none; }
html[data-tileart="holo"] .tileart .ta-svg { filter: saturate(1.7) drop-shadow(0 0 10px rgba(173,140,255,.45)); animation: ta-holo 9s linear infinite; }
@keyframes ta-holo { to { filter: saturate(1.7) hue-rotate(360deg) drop-shadow(0 0 10px rgba(173,140,255,.45)); } }
html[data-mode="light"][data-tileart="holo"] .tileart:not(.phototile *) :is(.k, .f, .f2) { stroke: color-mix(in oklab, var(--a) 60%, #000); }

/* chrome */
html[data-tileart="chrome"] .tileart { --ta-o: .9; }
html[data-tileart="chrome"] .tileart .m1 { stop-color: color-mix(in oklab, var(--a) 22%, #8a8fa0); }
html[data-tileart="chrome"] .tileart .m2 { stop-color: #fff; }
html[data-tileart="chrome"] .tileart .f2 { fill-opacity: .7; }
html[data-tileart="chrome"] .tileart :is(.f, .f2) { stroke: rgba(255,255,255,.8); stroke-width: 1; }
html[data-tileart="chrome"] .tileart .k { stroke: color-mix(in oklab, var(--a) 30%, #2a2d36); stroke-width: 2.2; }
html[data-tileart="chrome"] .tileart :is(.d, .p, .w) { fill: #fff; stroke: none; }
html[data-tileart="chrome"] .tileart .ta-svg { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)) contrast(1.08); }
html[data-tileart="chrome"] .tileart .ta-bg { background: radial-gradient(60% 70% at 85% 40%, var(--a-20), transparent 70%); }

/* gold */
html[data-tileart="gold"] .tileart { --ta-o: .95; }
html[data-tileart="gold"] .tileart .m1 { stop-color: #a8761c; }
html[data-tileart="gold"] .tileart .m2 { stop-color: #ffe9a8; }
html[data-tileart="gold"] .tileart .f2 { fill-opacity: .65; }
html[data-tileart="gold"] .tileart :is(.f, .f2) { stroke: #ffe9a8; stroke-width: .8; stroke-opacity: .7; }
html[data-tileart="gold"] .tileart .k { stroke: #5c3d06; stroke-width: 2; stroke-opacity: .7; }
html[data-tileart="gold"] .tileart :is(.d, .p, .w) { fill: #fff3cf; stroke: none; }
html[data-tileart="gold"] .tileart .ta-svg { filter: drop-shadow(0 0 12px rgba(255,200,90,.35)) drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
html[data-tileart="gold"] .tileart .ta-bg { background: radial-gradient(70% 80% at 85% 45%, color-mix(in oklab, var(--a) 35%, transparent), transparent 70%); }

/* duotone */
html[data-tileart="duotone"] .tileart { --ta-o: .92; }
html[data-tileart="duotone"] .tileart :is(.f, .f2, .d, .p, .w) { stroke: none; }
html[data-tileart="duotone"] .tileart .f { fill: var(--a); }
html[data-tileart="duotone"] .tileart .f2 { fill: var(--a2); }
html[data-tileart="duotone"] .tileart .k { stroke: var(--solid); stroke-width: 3.5; }
html[data-tileart="duotone"] .tileart :is(.d, .p) { fill: var(--a2); }
html[data-tileart="duotone"] .tileart .w { fill: var(--solid); }
html[data-tileart="duotone"] .tileart .ta-bg { background: radial-gradient(circle at 82% 46%, var(--a-20) 0 34%, transparent 34.5%); }
html[data-tileart="duotone"] .ta-scene .ta-bg { background: radial-gradient(circle at 80% 50%, var(--a-20) 0 26%, transparent 26.5%); }

/* sticker */
html[data-tileart="sticker"] .tileart { --ta-o: 1; }
html[data-tileart="sticker"] .tileart :is(.f, .f2) { stroke: #fff; stroke-width: 5; paint-order: stroke; stroke-linejoin: round; }
html[data-tileart="sticker"] .tileart .f { fill: var(--a); }
html[data-tileart="sticker"] .tileart .f2 { fill: var(--a2); }
html[data-tileart="sticker"] .tileart .k { stroke: #fff; stroke-width: 3; }
html[data-tileart="sticker"] .tileart :is(.d, .p, .w) { fill: #fff; stroke: none; }
html[data-tileart="sticker"] .tileart .ta-svg { filter: drop-shadow(2px 4px 0 rgba(0,0,0,.3)); rotate: -6deg; }
html[data-tileart="sticker"] .ta-scene .ta-svg { rotate: -2deg; }
html[data-tileart="sticker"] .tileart .ta-bg { background: none; }

/* sketch */
html[data-tileart="sketch"] .tileart { --ta-o: .8; }
html[data-tileart="sketch"] .tileart :is(.f, .f2, .d, .p, .w) { stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="sketch"] .tileart .f { fill: var(--a); fill-opacity: .14; stroke: var(--ta-fg); stroke-opacity: .85; }
html[data-tileart="sketch"] .tileart .f2 { fill: var(--a2); fill-opacity: .12; stroke: var(--a); }
html[data-tileart="sketch"] .tileart .k { stroke: var(--ta-fg); stroke-opacity: .7; stroke-width: 1.3; }
html[data-tileart="sketch"] .tileart :is(.d, .p) { fill: none; stroke: var(--a); }
html[data-tileart="sketch"] .tileart .w { fill: var(--ta-fg); fill-opacity: .3; stroke: none; }
html[data-tileart="sketch"] .tileart .ta-bg {
  background: repeating-linear-gradient(-45deg, rgba(var(--tint), .05) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(60% 70% at 82% 50%, #000, transparent 75%); mask-image: radial-gradient(60% 70% at 82% 50%, #000, transparent 75%);
}

/* ink */
html[data-tileart="ink"] .tileart { --ta-o: .9; }
html[data-tileart="ink"] .tileart :is(.f, .f2, .d, .p, .w) { stroke: none; }
html[data-tileart="ink"] .tileart .f { fill: var(--ta-fg); }
html[data-tileart="ink"] .tileart .f2 { fill: var(--a); }
html[data-tileart="ink"] .tileart .k { stroke: var(--solid); stroke-width: 3; }
html[data-tileart="ink"] .tileart :is(.d, .p) { fill: var(--a2); }
html[data-tileart="ink"] .tileart .w { fill: var(--solid); }
html[data-tileart="ink"] .tileart .ta-bg { background: radial-gradient(45% 55% at 84% 52%, var(--a-12), transparent 70%); }

/* blueprint */
html[data-tileart="blueprint"] .tileart { --ta-o: .9; --bp: rgba(255,255,255,.85); }
html[data-mode="light"][data-tileart="blueprint"] .tileart:not(.phototile *) { --bp: color-mix(in oklab, var(--a) 80%, #000); }
html[data-tileart="blueprint"] .tileart .ta-bg {
  background: linear-gradient(rgba(var(--tint), .07) 1px, transparent 1px) 0 0/16px 16px, linear-gradient(90deg, rgba(var(--tint), .07) 1px, transparent 1px) 0 0/16px 16px,
              radial-gradient(70% 80% at 85% 50%, var(--a-20), transparent 70%);
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 65%); mask-image: linear-gradient(100deg, transparent 20%, #000 65%);
}
html[data-tileart="blueprint"] .tileart :is(.f, .f2) { fill: rgba(var(--tint), .05); stroke: var(--bp); stroke-width: 1.3; }
html[data-tileart="blueprint"] .tileart .k { stroke: var(--bp); stroke-width: 1; stroke-dasharray: 4 3; stroke-opacity: .7; }
html[data-tileart="blueprint"] .tileart :is(.d, .p) { fill: none; stroke: var(--bp); stroke-width: 1; }
html[data-tileart="blueprint"] .tileart .w { fill: var(--bp); fill-opacity: .4; stroke: none; }

/* clay */
html[data-tileart="clay"] .tileart { --ta-o: .95; }
html[data-tileart="clay"] .tileart :is(.f, .f2, .d, .p, .w) { stroke: none; }
html[data-tileart="clay"] .tileart .f { fill: color-mix(in oklab, var(--a) 85%, #fff); }
html[data-tileart="clay"] .tileart .f2 { fill: color-mix(in oklab, var(--a2) 85%, #fff); }
html[data-tileart="clay"] .tileart .k { stroke: rgba(255,255,255,.8); stroke-width: 4; }
html[data-tileart="clay"] .tileart :is(.d, .p, .w) { fill: #fff; }
html[data-tileart="clay"] .tileart .ta-svg { filter: drop-shadow(0 3px 0 color-mix(in oklab, var(--a) 55%, #000)) drop-shadow(0 12px 14px rgba(0,0,0,.35)); }
html[data-tileart="clay"] .tileart .ta-bg { background: radial-gradient(50% 60% at 82% 55%, var(--a-12), transparent 70%); }

/* glass shapes */
html[data-tileart="glassy"] .tileart { --ta-o: .95; --gl: rgba(255,255,255,.7); }
html[data-mode="light"][data-tileart="glassy"] .tileart:not(.phototile *) { --gl: var(--a); }
html[data-tileart="glassy"] .tileart .f { fill: rgba(255,255,255,.12); stroke: var(--gl); stroke-width: 1.5; }
html[data-tileart="glassy"] .tileart .f2 { fill: var(--a-30); stroke: var(--gl); stroke-width: 1.2; }
html[data-tileart="glassy"] .tileart .k { stroke: var(--gl); stroke-width: 1.6; }
html[data-tileart="glassy"] .tileart :is(.d, .p, .w) { fill: var(--gl); stroke: none; }
html[data-tileart="glassy"] .tileart .ta-svg { filter: drop-shadow(0 0 14px var(--a-45)); }
html[data-tileart="glassy"] .tileart .ta-bg { background: radial-gradient(55% 65% at 84% 45%, var(--a-30), transparent 70%), radial-gradient(35% 45% at 70% 85%, var(--a2-20), transparent 70%); }

/* synthwave */
html[data-tileart="synth"] .tileart { --ta-o: .95; }
html[data-tileart="synth"] .tileart::before {
  width: 30%; aspect-ratio: 1; right: 4%; top: 6%; border-radius: 50%;
  background: linear-gradient(180deg, #ffd27a, var(--a2) 55%, var(--a));
  -webkit-mask: linear-gradient(#000 52%, transparent 52% 58%, #000 58% 66%, transparent 66% 71%, #000 71% 78%, transparent 78% 82%, #000 82%);
  mask: linear-gradient(#000 52%, transparent 52% 58%, #000 58% 66%, transparent 66% 71%, #000 71% 78%, transparent 78% 82%, #000 82%);
  opacity: .45;
}
html[data-tileart="synth"] :is(.ta-scene, .tile.wide .tileart)::before { width: 15%; right: 6%; top: 4%; }
html[data-tileart="synth"] .tileart::before { opacity: .32; }
html[data-tileart="synth"] .tileart .ta-bg {
  top: 62%; background: linear-gradient(90deg, var(--a-45) 1px, transparent 1px) 0 0/22px 100%, linear-gradient(var(--a-45) 1px, transparent 1px) 0 0/100% 9px;
  -webkit-mask-image: linear-gradient(transparent, #000 70%), linear-gradient(100deg, transparent 30%, #000 70%); mask-image: linear-gradient(100deg, transparent 30%, #000 70%);
  transform: perspective(80px) rotateX(35deg); transform-origin: 50% 0; opacity: .7;
}
html[data-tileart="synth"] .tileart :is(.f, .f2, .k, .d, .p, .w, .b) { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="synth"] .tileart .f { stroke: var(--a2); }
html[data-tileart="synth"] .tileart .f2 { stroke: var(--a); }
html[data-tileart="synth"] .tileart .k { stroke: color-mix(in oklab, var(--a) 60%, #fff); stroke-width: 1.5; }
html[data-tileart="synth"] .tileart :is(.d, .p) { fill: #fff; stroke: none; }
html[data-tileart="synth"] .tileart .w { fill: var(--a2); stroke: none; }
html[data-tileart="synth"] .tileart .ta-svg { filter: drop-shadow(0 0 3px var(--a2)) drop-shadow(0 0 10px var(--a-60)); }

/* line art */
html[data-tileart="outline"] .tileart { --ta-o: .75; }
html[data-tileart="outline"] .tileart :is(.f, .f2, .d, .p, .w) { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[data-tileart="outline"] .tileart .f { stroke: var(--ta-fg); }
html[data-tileart="outline"] .tileart .f2 { stroke: var(--a); }
html[data-tileart="outline"] .tileart .k { stroke: var(--a); stroke-width: 1.6; }
html[data-tileart="outline"] .tileart :is(.d, .p) { fill: var(--a2); stroke: none; }
html[data-tileart="outline"] .tileart .ta-bg { background: none; }

/* ================================================================ backgrounds */
[data-bg="gradient"] .backdrop { background: linear-gradient(180deg, color-mix(in oklab, var(--a) 30%, var(--bg)) 0%, color-mix(in oklab, var(--a2) 10%, var(--bg)) 45%, var(--bg) 80%); }
[data-mode="light"][data-bg="gradient"] .backdrop { background: linear-gradient(180deg, color-mix(in oklab, var(--a) 18%, var(--bg)) 0%, var(--bg) 75%); }
[data-bg="gradient"] .backdrop::before, [data-bg="gradient"] .backdrop::after,
[data-bg="spotlight"] .backdrop::before, [data-bg="spotlight"] .backdrop::after,
[data-bg="breathe"] .backdrop::before, [data-bg="breathe"] .backdrop::after,
[data-bg="radar"] .backdrop::after, [data-bg="galaxy"] .backdrop::after { display: none; }
[data-bg="spotlight"] .backdrop { background: radial-gradient(60vmax 55vmax at 50% -12%, var(--a-45), transparent 70%), radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0,0,0,.5)); }
[data-mode="light"][data-bg="spotlight"] .backdrop { background: radial-gradient(60vmax 55vmax at 50% -12%, var(--a-30), transparent 70%), radial-gradient(130% 100% at 50% 40%, transparent 60%, rgba(20,16,40,.08)); }
[data-bg="dots"] .backdrop { background-image: radial-gradient(color-mix(in oklab, var(--a) 40%, transparent) 1.3px, transparent 1.8px); background-size: 22px 22px; }
[data-bg="dots"] .backdrop::before, [data-bg="dots"] .backdrop::after,
[data-bg="stripes"] .backdrop::before, [data-bg="stripes"] .backdrop::after,
[data-bg="cubes"] .backdrop::before, [data-bg="cubes"] .backdrop::after,
[data-bg="topo"] .backdrop::before, [data-bg="topo"] .backdrop::after { opacity: .3; animation: none; }
[data-bg="stripes"] .backdrop { background: repeating-linear-gradient(-45deg, rgba(var(--tint), .035) 0 16px, transparent 16px 32px); }
[data-bg="topo"] .backdrop > .f1, [data-bg="cubes"] .backdrop > .f1 { display: block; background: var(--a); opacity: .16; }
[data-bg="topo"] .backdrop > .f1 { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M130 90C190 60 250 100 240 160S150 230 110 190 70 120 130 90Z'/%3E%3Cpath d='M120 60C210 20 290 80 280 170S160 270 90 220 40 100 120 60Z'/%3E%3Cpath d='M110 30C230 -20 330 70 320 180S170 310 70 250 10 80 110 30Z'/%3E%3Cpath d='M380 330C420 310 460 340 455 380S400 430 375 405 345 345 380 330Z'/%3E%3Cpath d='M370 300C440 270 500 330 490 395S390 470 350 430 310 320 370 300Z'/%3E%3Cpath d='M360 268C460 230 540 320 525 410S380 510 320 455 270 300 360 268Z'/%3E%3Cpath d='M-20 400C60 360 150 420 200 470S240 540 260 540M-20 440C50 410 120 450 160 500M300 -20C320 40 400 60 470 40S540 0 540 0M260 -20C290 70 400 100 540 60'/%3E%3C/g%3E%3C/svg%3E") 0 0/520px 520px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M130 90C190 60 250 100 240 160S150 230 110 190 70 120 130 90Z'/%3E%3Cpath d='M120 60C210 20 290 80 280 170S160 270 90 220 40 100 120 60Z'/%3E%3Cpath d='M110 30C230 -20 330 70 320 180S170 310 70 250 10 80 110 30Z'/%3E%3Cpath d='M380 330C420 310 460 340 455 380S400 430 375 405 345 345 380 330Z'/%3E%3Cpath d='M370 300C440 270 500 330 490 395S390 470 350 430 310 320 370 300Z'/%3E%3Cpath d='M360 268C460 230 540 320 525 410S380 510 320 455 270 300 360 268Z'/%3E%3Cpath d='M-20 400C60 360 150 420 200 470S240 540 260 540M-20 440C50 410 120 450 160 500M300 -20C320 40 400 60 470 40S540 0 540 0M260 -20C290 70 400 100 540 60'/%3E%3C/g%3E%3C/svg%3E") 0 0/520px 520px repeat; }
[data-bg="cubes"] .backdrop > .f1 { opacity: .09; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M28 0L28 34L56 50L56 16Z' fill='%23fff' fill-opacity='.35'/%3E%3Cpath d='M0 66L28 82L28 100L0 100Z' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/56px 100px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M28 0L28 34L56 50L56 16Z' fill='%23fff' fill-opacity='.35'/%3E%3Cpath d='M0 66L28 82L28 100L0 100Z' fill='%23fff' fill-opacity='.35'/%3E%3C/svg%3E") 0 0/56px 100px repeat; }
[data-mode="light"]:is([data-bg="topo"], [data-bg="cubes"]) .backdrop > .f1 { opacity: .12; }

/* moving */
[data-bg="blobs"] .backdrop > .fx, [data-bg="bokeh"] .backdrop > .fx, [data-bg="smoke"] .backdrop > .fx,
[data-bg="galaxy"] .backdrop > .fx, [data-bg="radar"] .backdrop > .fx, [data-bg="breathe"] .backdrop > .f1 { display: block; }
[data-bg="blobs"] .backdrop::before, [data-bg="blobs"] .backdrop::after { opacity: .25; }
[data-bg="blobs"] .backdrop > .fx { inset: auto; width: 62vmax; height: 62vmax; filter: blur(50px); opacity: .45; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
[data-bg="blobs"] .backdrop > .f1 { top: -12vmax; right: -14vmax; background: var(--a); animation: fx-blob 22s ease-in-out infinite alternate; }
[data-bg="blobs"] .backdrop > .f2 { bottom: -16vmax; left: -16vmax; background: var(--a2); opacity: .35; animation: fx-blob 28s ease-in-out -9s infinite alternate-reverse; }
@keyframes fx-blob {
  0% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: translate(0, 0) rotate(0deg); }
  50% { border-radius: 63% 37% 42% 58% / 58% 62% 38% 42%; transform: translate(-8vmax, 10vmax) rotate(80deg); }
  100% { border-radius: 38% 62% 54% 46% / 47% 35% 65% 53%; transform: translate(6vmax, 4vmax) rotate(160deg); }
}
[data-bg="bokeh"] .backdrop > .fx { inset: -20%; filter: blur(5px); }
[data-bg="bokeh"] .backdrop > .f1 {
  background: radial-gradient(circle at 12% 22%, var(--a-45) 0 3.5vmax, transparent 3.7vmax), radial-gradient(circle at 72% 14%, var(--a2-45) 0 5vmax, transparent 5.2vmax),
    radial-gradient(circle at 40% 62%, var(--a-30) 0 6vmax, transparent 6.2vmax), radial-gradient(circle at 86% 70%, var(--a-45) 0 3vmax, transparent 3.2vmax),
    radial-gradient(circle at 22% 88%, var(--a2-45) 0 4vmax, transparent 4.2vmax);
  opacity: .55; animation: fx-bokeh 26s ease-in-out infinite alternate; }
[data-bg="bokeh"] .backdrop > .f2 {
  background: radial-gradient(circle at 60% 40%, var(--a2-20) 0 7vmax, transparent 7.2vmax), radial-gradient(circle at 30% 30%, var(--a-20) 0 2.5vmax, transparent 2.7vmax),
    radial-gradient(circle at 90% 35%, var(--a-30) 0 2vmax, transparent 2.2vmax), radial-gradient(circle at 55% 85%, var(--a-20) 0 5vmax, transparent 5.2vmax);
  filter: blur(9px); opacity: .6; animation: fx-bokeh 34s ease-in-out -12s infinite alternate-reverse; }
@keyframes fx-bokeh { from { transform: translate(0, 4%); } to { transform: translate(-4%, -6%); } }
[data-bg="galaxy"] .backdrop > .f1 {
  inset: auto; left: 50%; top: 40%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
  background: conic-gradient(from 0deg, transparent, var(--a-30), transparent 22%, color-mix(in oklab, var(--a2) 28%, transparent), transparent 47%, var(--a-30), transparent 72%, color-mix(in oklab, var(--a2) 28%, transparent), transparent);
  -webkit-mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.6) 35%, transparent 70%); mask: radial-gradient(closest-side, #000 8%, rgba(0,0,0,.6) 35%, transparent 70%);
  filter: blur(18px); animation: fx-galaxy 80s linear infinite; }
[data-bg="galaxy"] .backdrop > .f2 {
  background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 80px 120px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 140px 60px, #fff, transparent), radial-gradient(1px 1px at 170px 160px, rgba(255,255,255,.6), transparent);
  background-size: 200px 200px; opacity: .45; }
[data-mode="light"][data-bg="galaxy"] .backdrop > .f2 { display: none; }
@keyframes fx-galaxy { to { transform: rotate(360deg); } }
[data-bg="radar"] .backdrop > .f1 {
  inset: auto; left: 50%; top: 45%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--a-45), transparent 70deg);
  -webkit-mask: radial-gradient(closest-side, #000 60%, transparent 100%); mask: radial-gradient(closest-side, #000 60%, transparent 100%);
  opacity: .5; animation: fx-galaxy 7s linear infinite; }
[data-bg="radar"] .backdrop > .f2 {
  inset: auto; left: 50%; top: 45%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 9vmax, var(--a-20) 9vmax calc(9vmax + 1px)), linear-gradient(var(--a-12), var(--a-12)) 50% 0/1px 100% no-repeat, linear-gradient(var(--a-12), var(--a-12)) 0 50%/100% 1px no-repeat;
  -webkit-mask: radial-gradient(closest-side, #000 70%, transparent); mask: radial-gradient(closest-side, #000 70%, transparent); }
[data-bg="smoke"] .backdrop > .fx { inset: -10% -40%; filter: blur(30px); }
[data-bg="smoke"] .backdrop > .f1 {
  background: radial-gradient(30% 22% at 30% 60%, rgba(var(--tint), .1), transparent 70%), radial-gradient(28% 20% at 65% 35%, var(--a-20), transparent 70%),
    radial-gradient(26% 18% at 50% 85%, rgba(var(--tint), .08), transparent 70%);
  animation: fx-smoke 38s ease-in-out infinite alternate; }
[data-bg="smoke"] .backdrop > .f2 {
  background: radial-gradient(30% 20% at 70% 70%, var(--a2-20), transparent 70%), radial-gradient(24% 18% at 25% 25%, rgba(var(--tint), .07), transparent 70%);
  animation: fx-smoke 46s ease-in-out -20s infinite alternate-reverse; }
@keyframes fx-smoke { from { transform: translateX(-12%) scale(1); } to { transform: translateX(12%) scale(1.15); } }
[data-bg="breathe"] .backdrop > .f1 {
  inset: auto; left: 50%; top: 38%; width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  background: radial-gradient(closest-side, var(--a-45), color-mix(in oklab, var(--a2) 18%, transparent) 55%, transparent 75%);
  animation: fx-breathe 8s ease-in-out infinite alternate; }
@keyframes fx-breathe { from { transform: scale(.75); opacity: .45; } to { transform: scale(1.1); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .backdrop > .fx { animation: none !important; } }

/* ================================================================ the Fine-tune page */
.ftpage { display: grid; gap: 14px; }
.ftpv { background: linear-gradient(var(--solid), var(--solid)) padding-box, var(--edge) border-box !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.7); position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 25; padding: 10px; display: grid; gap: 8px; }
.ftpv-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ftpv-head .hint { font-size: 11.5px; }
.ftpv .pv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); flex: none; }
.ftpv-screen { position: relative; height: 190px; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg);
  width: min(100%, 230px); margin-inline: auto; transition: height .25s, width .25s; }
.ftpv.big .ftpv-screen { height: min(62vh, 560px); width: min(100%, 300px); }
.ftpv-screen iframe { position: absolute; top: 0; left: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; background: var(--bg); }
.ftform { display: grid; gap: 12px; min-width: 0; }
.ft-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px; }
.ft-tabs::-webkit-scrollbar { display: none; }
.ft-tabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--line-2);
  font-size: 13px; font-weight: 600; background: rgba(var(--tint), .03); color: var(--mfg); white-space: nowrap; }
.ft-tabs a.on { color: var(--hi); border-color: var(--a); background: var(--a-12); box-shadow: 0 0 0 1px var(--a-45); }
.ft-sec { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-xl); border: 1px solid var(--line-2); background: rgba(var(--tint), .02); min-width: 0; }
.ftform.ft-js .ft-sec:not(.on) { display: none; }
.ft-sec h2 { font-size: 16px; margin: 0; }
.ft-sec h2:not(:first-child) { margin-top: 10px; }
.ft-sec h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mfg); margin: 8px 0 -2px; font-family: var(--body); }
.ft-sec .hint { margin: 0; }
.ft-sec a[data-fttab] { color: var(--a); text-decoration: underline; text-underline-offset: 3px; }
.ft-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ft-opt { position: relative; display: block; }
.ft-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ft-opt > span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: rgba(var(--tint), .03); cursor: pointer; transition: border-color .15s, background .15s; }
.ft-opt b { font-size: 13.5px; }
.ft-opt small { font-size: 11.5px; color: var(--mfg); line-height: 1.35; }
.ft-opt.own > span { border-style: dashed; }
.ft-opt input:checked + span { border-color: var(--a); border-style: solid; background: var(--a-12); box-shadow: 0 0 0 1px var(--a-45); }
.ft-opt input:checked + span b::after { content: " ✓"; color: var(--a); }
.ft-opt input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.ft-opts.shapes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.ft-opts.shapes .ft-opt > span { align-items: center; text-align: center; }
.ft-shape { width: 46px; height: 32px; border: 2px solid var(--a); background: var(--a-12); margin-bottom: 4px; display: block; }
.ft-shape.sh-square { border-radius: 2px; } .ft-shape.sh-subtle { border-radius: 5px; } .ft-shape.sh-sharp { border-radius: 8px; }
.ft-shape.sh-round { border-radius: 12px; } .ft-shape.sh-soft { border-radius: 15px; } .ft-shape.sh-bubbly { border-radius: 18px; } .ft-shape.sh-pill { border-radius: 99px; }
.ft-still { margin-top: 6px; }
.ft-bar { position: sticky; bottom: calc(var(--dock-h, 0px) + 18px + env(safe-area-inset-bottom)); z-index: 26; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 14px; border-radius: 99px; flex-wrap: wrap; }
.ft-state { font-size: 12.5px; color: var(--mfg); min-width: 120px; }
.ftpage.dirty .ft-bar { border-color: var(--a); box-shadow: 0 0 0 3px var(--a-20), var(--shadow); }
.ftpage.dirty .ft-state { color: var(--fg); font-weight: 600; }
.ft-more { justify-content: center; }
@media (max-width: 420px) { .ft-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-opts.shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .ftpage { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .ftpv { grid-column: 2; grid-row: 1; top: 16px; }
  .ftform { grid-column: 1; grid-row: 1; }
  .ftpv-screen, .ftpv.big .ftpv-screen { width: 100%; height: min(78vh, 640px); }
  .ftpv [data-ftbig] { display: none; }
}
body[data-embed] .pvbar { display: none; }
.ft-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ft-col { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: rgba(var(--tint), .03); cursor: pointer; }
.ft-col:has(input[type=checkbox]:checked) { border-color: var(--a-45); background: var(--a-6); }
.ft-col b { display: block; font-size: 13.5px; }
.ft-col small { display: block; font-size: 11.5px; color: var(--mfg); line-height: 1.3; }
.ft-col input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--a); flex: none; }
.ft-col input[type=color] { width: 44px; height: 34px; padding: 0; border: 1px solid var(--line-2); border-radius: 10px; background: none; flex: none; cursor: pointer; }
.ft-col:not(:has(input[type=checkbox]:checked)) input[type=color] { opacity: .45; }