/* ===== Glass Folder Cards — port of 21st.dev @kedhareswer/glass-folder-cards (MIT); hover state lives on the card link ===== */
.gf-on .work .in{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:clamp(360px,29vw,430px);background:none;box-shadow:none;border-radius:24px;color:inherit}
.gf-on .work .in>.dev,.gf-on .work .in>.flood{display:none}
.gf-on .work .in>.body{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gf-on .work .in:focus-visible{outline:2px solid var(--t1);outline-offset:4px}
.gf-root span,.gf-root i{display:block}
.gf-root{--gf-px:0;--gf-py:0;--gf-ease:cubic-bezier(.2,.8,.2,1);--gf-spring:cubic-bezier(.34,1.36,.5,1);--gf-hinge:0deg;--gf-lift:42px;--gf-spread:0px;--gf-fan:0deg;--gf-stack:15px;--gf-ink:#141416;--gf-ink-soft:rgba(20,20,22,.55);
  position:relative;flex:none;font-family:var(--sans);-webkit-font-smoothing:antialiased;isolation:isolate;pointer-events:none}
.gf-root[data-tone="dark"]{--gf-ink:#f5f5f7;--gf-ink-soft:rgba(245,245,247,.58)}
.in:hover .gf-root,.in:focus-visible .gf-root{--gf-hinge:-11deg;--gf-lift:-34px;--gf-spread:8px;--gf-fan:1.4deg;--gf-stack:10px}
.gf-stage{position:absolute;left:0;top:0;width:340px;height:272px;transform-origin:0 0}
.gf-tilt{position:absolute;inset:0;transform:perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));transition:transform .9s var(--gf-ease)}
.gf-shadow{position:absolute;left:18px;right:18px;bottom:-6px;height:60px;border-radius:40px;background:rgba(16,18,24,.34);filter:blur(22px);transform:translateX(calc(var(--gf-px) * -8px));transition:transform .9s var(--gf-ease),opacity .9s var(--gf-ease)}
.gf-root[data-tone="dark"] .gf-shadow{background:rgba(0,0,0,.62)}
.gf-back{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#f3f3f4 0%,#e3e3e6 100%)}
.gf-root[data-tone="dark"] .gf-back{background:linear-gradient(180deg,#2a2a2e 0%,#121214 100%)}
.gf-art{position:absolute;left:-12px;top:-12px;max-width:none;transform:translate(calc(var(--gf-px) * -7px),calc(var(--gf-py) * -6px)) scale(1.02);transition:transform 1.1s var(--gf-ease),opacity 1.2s var(--gf-ease),filter 1.2s var(--gf-ease)}
canvas.gf-art{opacity:0;filter:blur(14px) saturate(.6)}
canvas.gf-art[data-ready]{opacity:1;filter:none}
.gf-back-sheen{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 22%),radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%);pointer-events:none}
.gf-rim{position:absolute;left:0;top:0;max-width:none;overflow:visible;pointer-events:none;fill:none}
.gf-back-rim{width:340px;height:272px}
.gf-back-rim path{stroke:rgba(255,255,255,.45);stroke-width:1}
.gf-root[data-tone="dark"] .gf-back-rim path{stroke:rgba(255,255,255,.16)}
.gf-files{position:absolute;inset:0;z-index:5;pointer-events:none;clip-path:inset(-400px -400px 10px -400px)}
.gf-sheet{box-sizing:border-box;position:absolute;left:34px;top:96px;width:272px;height:184px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,#f2f2f0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 .5px rgba(0,0,0,.1),0 10px 26px -8px rgba(10,12,20,.28);transform-origin:50% 100%;
  transform:translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)),calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1)) rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));
  transition:transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms),box-shadow .4s var(--gf-ease),translate .9s var(--gf-ease),opacity .9s var(--gf-ease)}
.gf-root[data-tone="dark"] .gf-sheet{background:linear-gradient(180deg,#2c2c30 0%,#1c1c1f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 .5px rgba(255,255,255,.08),0 12px 28px -8px rgba(0,0,0,.7)}
.gf-sheet--art{background:#1a1a1d}
.gf-sheet-art{position:absolute;left:0;top:0;width:272px;height:184px;max-width:none;transition:opacity .9s var(--gf-ease),filter .9s var(--gf-ease)}
canvas.gf-sheet-art{opacity:0;filter:blur(10px)}
canvas.gf-sheet-art[data-ready]{opacity:1;filter:none}
.gf-sheet--art::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);pointer-events:none}
.gf-root .gf-sheet-head{position:absolute;left:14px;right:14px;top:11px;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;white-space:nowrap}
.gf-sheet-name{overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:560;letter-spacing:-.005em;color:#18181b}
.gf-sheet-meta{flex:none;font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:rgba(24,24,27,.5)}
.gf-root[data-tone="dark"] .gf-sheet-name,.gf-sheet--art .gf-sheet-name{color:#fafafa}
.gf-root[data-tone="dark"] .gf-sheet-meta,.gf-sheet--art .gf-sheet-meta{color:rgba(250,250,250,.66)}
.gf-root .gf-lines{position:absolute;left:14px;right:14px;top:40px;display:flex;flex-direction:column;gap:9px}
.gf-lines i{height:5px;border-radius:3px;background:rgba(24,24,27,.08)}
.gf-lines i:first-child{height:9px;margin-bottom:4px;background:rgba(24,24,27,.14)}
.gf-root[data-tone="dark"] .gf-lines i{background:rgba(255,255,255,.08)}
.gf-root[data-tone="dark"] .gf-lines i:first-child{background:rgba(255,255,255,.16)}
.gf-front{position:absolute;left:0;top:74px;width:340px;height:198px;z-index:10;-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);transform-origin:50% 100%;transform:perspective(760px) rotateX(var(--gf-hinge));transition:transform .8s var(--gf-spring),translate 1s var(--gf-ease),opacity 1s var(--gf-ease)}
.gf-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.5) 42%,rgba(252,252,252,.93) 100%)}
.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(18,18,20,.18) 0%,rgba(14,14,16,.62) 46%,rgba(8,8,10,.94) 100%)}
.gf-spec{position:absolute;inset:0;background:radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%),rgba(255,255,255,.5),rgba(255,255,255,0) 70%);mix-blend-mode:soft-light;opacity:.9;pointer-events:none}
.gf-root[data-tone="dark"] .gf-spec{mix-blend-mode:screen;opacity:.16}
.gf-front-rim{width:340px;height:198px}
.gf-front-rim path{stroke-width:2.4;transition:stroke-width .3s var(--gf-ease)}
.gf-root[data-tone="dark"] .gf-front-rim{opacity:.55}
.in:focus-visible .gf-front-rim path{stroke-width:5}
.gf-root .gf-label{position:absolute;z-index:2;display:flex;flex-direction:column;gap:4px;max-width:200px;pointer-events:none;color:var(--gf-ink)}
.gf-root[data-place="bottom-left"] .gf-label{left:28px;bottom:32px}
.gf-title{font-size:18px;font-weight:500;line-height:1.15;letter-spacing:-.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-meta{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--gf-ink-soft);white-space:nowrap}
.gf-root .gf-key{box-sizing:border-box;position:absolute;right:22px;bottom:22px;z-index:12;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;transition:transform .35s var(--gf-spring),box-shadow .35s var(--gf-ease),opacity .6s var(--gf-ease) .7s,scale .7s var(--gf-spring) .7s}
.in:hover .gf-key{transform:translateY(-2px)}
.in:active .gf-key{transform:translateY(0) scale(.93);transition-duration:.12s}
.gf-key--add{color:#fff;background:radial-gradient(120% 90% at 50% 0%,#3a3a3f 0%,#121214 55%,#050506 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 8px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.75),0 14px 22px -8px rgba(0,0,0,.55),0 3px 6px -2px rgba(0,0,0,.35)}
.gf-root[data-tone="dark"] .gf-key--add{color:#111113;background:radial-gradient(120% 90% at 50% 0%,#ffffff 0%,#ececee 55%,#d2d2d6 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 8px rgba(0,0,0,.14),0 0 0 1px rgba(0,0,0,.4),0 14px 22px -8px rgba(0,0,0,.7)}
.gf-key--more{color:#111113;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(226,226,230,.82) 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.16),0 10px 18px -8px rgba(0,0,0,.3)}
.gf-root[data-tone="dark"] .gf-key--more{color:#f5f5f7;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.1),0 10px 18px -8px rgba(0,0,0,.6)}
.gf-glyph{display:block;width:24px;height:24px;max-width:none;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
/* entrance: the folder assembles itself */
.gf-root:not([data-entered]) .gf-back,.gf-root:not([data-entered]) .gf-back-rim{translate:0 22px;opacity:0}
.gf-root:not([data-entered]) .gf-sheet{translate:0 -120px;opacity:0}
.gf-root:not([data-entered]) .gf-front{translate:0 46px;opacity:0}
.gf-root:not([data-entered]) .gf-key{opacity:0;scale:.6}
.gf-root:not([data-entered]) .gf-shadow{opacity:0}
.gf-back,.gf-back-rim{transition:translate 1s var(--gf-ease),opacity .9s var(--gf-ease)}
.gf-root[data-entered] .gf-sheet{transition-delay:calc(var(--gf-depth) * 40ms),0s,calc(.18s + var(--gf-depth) * 90ms),calc(.18s + var(--gf-depth) * 90ms)}
.gf-root[data-entered] .gf-front{transition-delay:0s,.42s,.42s}
/* phones: no blur behind the glass (it costs frames), a slightly more solid tint instead */
@media (max-width:900px),(hover:none){
  .gf-front{-webkit-backdrop-filter:none;backdrop-filter:none}
  .gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(24,24,27,.72) 0%,rgba(14,14,16,.9) 46%,rgba(8,8,10,.98) 100%)}
  .gf-root[data-tone="light"] .gf-tint{background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(250,250,250,.9) 42%,rgba(252,252,252,.98) 100%)}
  .gf-on .work .in{min-height:300px}
}
@media (prefers-reduced-motion:reduce){.gf-root *{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}.gf-tilt{transform:none}}
/* folders read as one set: an even three-column desk on wide screens */
@media (min-width:900.02px){.gf-on .work .row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,56px);row-gap:clamp(8px,2vh,24px)}.gf-on .work .row>*{grid-column:auto}}
@media (max-width:900px),(hover:none){.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(26,26,29,.95) 0%,rgba(14,14,16,.97) 46%,rgba(8,8,10,.99) 100%)}}
.gf-on .work .in{min-height:0}
/* the name as a lens (glasshead.js) */
.hero .brand{position:relative}
.gh-cv{position:absolute;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s cubic-bezier(.23,1,.32,1)}
.gh-on .gh-cv{opacity:1}
.gh-on .hero .brand h1{color:transparent;text-shadow:none;transition:color .9s cubic-bezier(.23,1,.32,1)}
.gh-on .hero .brand h1::selection{background:#ffffff40;color:transparent}
/* the back panel without artwork: smoked glass a step lighter than the front, a lit top edge */
.gf-root[data-tone="dark"] .gf-back{background:radial-gradient(120% 90% at 70% 0%,#ffffff17,#fff0 60%),linear-gradient(180deg,#2c2c30 0%,#161618 100%)}
.gf-root[data-tone="light"] .gf-back{background:radial-gradient(120% 90% at 70% 0%,#fff,#fff0 60%),linear-gradient(180deg,#ececee 0%,#d6d6da 100%)}
.gf-root[data-tone="dark"] .gf-back-rim path{stroke:rgba(255,255,255,.22)}
/* the line under the name: no prompt, set in the site's text face */
.hd3 .u-text::before{content:none}
.hd3 .u-text,.lang-en.hd3 .u-text{font:500 clamp(17px,1.5vw,21px)/1.4 var(--sans);letter-spacing:-.01em;text-transform:none;color:#e6e6e4;text-shadow:0 0 14px var(--void)}
/* small own touches on the folders: a round key, the site's halftone printed on the back, lighter at the tab */
.gf-root .gf-key{width:52px;height:52px;border-radius:50%;right:24px;bottom:25px}
.gf-back::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffffff38 0 1.1px,#fff0 1.5px) 0 0/7px 7px;
  -webkit-mask:radial-gradient(70% 70% at calc(62% + var(--gf-px) * 14%) 0%,#000 0,#0000 75%);mask:radial-gradient(70% 70% at calc(62% + var(--gf-px) * 14%) 0%,#000 0,#0000 75%);opacity:.6;transition:opacity .6s var(--gf-ease)}
.in:hover .gf-back::after,.in:focus-visible .gf-back::after{opacity:1}
/* hover: the three sheets come far enough out of the pocket to read every line */
.in:hover .gf-root,.in:focus-visible .gf-root{--gf-lift:-58px;--gf-stack:30px;--gf-spread:4px;--gf-fan:.8deg}
@media (min-width:900.02px){.gf-on .work .row{margin-top:clamp(-56px,-4vh,-24px)}}
/* sheets rise just enough to read their lines */
.in:hover .gf-root,.in:focus-visible .gf-root{--gf-lift:-26px;--gf-stack:24px;--gf-spread:3px;--gf-fan:.6deg}
/* the project symbol etched into the glass, top right: frosted at rest, lit when the folder opens */
.gf-root .gf-sym{position:absolute;right:26px;top:50px;z-index:2;width:40px;height:40px;color:#f2f2f0;opacity:.55;
  filter:drop-shadow(0 1px 0 #ffffff40) drop-shadow(0 -1px 0 #0009);transition:opacity .5s var(--gf-ease),transform .7s var(--gf-spring)}
.gf-root .gf-sym svg{display:block;width:100%;height:100%;max-width:none}
.in:hover .gf-sym,.in:focus-visible .gf-sym{opacity:.95;transform:translateY(-2px) scale(1.04)}
@media (max-width:900px),(hover:none){.gf-root .gf-sym{opacity:.8}}
.in:hover .gf-root,.in:focus-visible .gf-root{--gf-lift:-48px;--gf-stack:19px}
.gf-root .gf-sheet-head{top:4px}
.gf-sheet-name{font-size:12px}
/* the symbol sits in front of the name, on its own small glass tile */
.gf-root .gf-label--sym{display:grid;grid-template-columns:44px auto;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center;max-width:230px}
.gf-root .gf-label--sym .gf-sym{position:static;grid-row:1/3;width:44px;height:44px;padding:9px;box-sizing:border-box;border-radius:13px;opacity:1;filter:none;transform:none;
  background:linear-gradient(160deg,#ffffff1f,#ffffff08);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 0 0 1px #ffffff14;transition:background .4s var(--gf-ease)}
.gf-root .gf-label--sym .gf-title{align-self:end}
.gf-root .gf-label--sym .gf-meta{align-self:start}
.in:hover .gf-label--sym .gf-sym,.in:focus-visible .gf-label--sym .gf-sym{transform:none;background:linear-gradient(160deg,#ffffff2e,#ffffff0d)}
/* the project symbol pressed into the glass itself: large, faint, lit along its upper edges like a deboss */
.gf-root .gf-mark{position:absolute;z-index:1;right:30px;top:44px;width:104px;height:104px;color:#fff;opacity:.11;
  filter:drop-shadow(0 -1px 0 #000) drop-shadow(0 1.5px 0 #ffffffb3);mix-blend-mode:screen;transition:opacity .6s var(--gf-ease),transform .9s var(--gf-ease);
  transform:translate(calc(var(--gf-px) * -3px),calc(var(--gf-py) * -2px))}
.gf-root .gf-mark svg{display:block;width:100%;height:100%;max-width:none}
.in:hover .gf-mark,.in:focus-visible .gf-mark{opacity:.2}
@media (max-width:900px),(hover:none){.gf-root .gf-mark{opacity:.16}}
/* sheets like the original: white paper with ruled lines, the middle one a print */
.gf-root[data-tone="dark"] .gf-sheet{background:linear-gradient(180deg,#ffffff 0%,#f0f0ee 100%);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px #0000001f,0 12px 28px -8px #000a}
.gf-root[data-tone="dark"] .gf-sheet-name{color:#18181b}
.gf-root[data-tone="dark"] .gf-sheet-meta{color:#18181b80}
.gf-root[data-tone="dark"] .gf-lines i{background:#18181b14}
.gf-root[data-tone="dark"] .gf-lines i:first-child{background:#18181b24}
.gf-root[data-tone="dark"] .gf-sheet--art{background:#1a1a1d}
.gf-root[data-tone="dark"] .gf-sheet--art .gf-sheet-name{color:#fafafa}
.gf-root[data-tone="dark"] .gf-sheet--art .gf-sheet-meta{color:#fafafaa8}
.gf-root .gf-sheet-head{top:9px}
.gf-sheet-name{font-size:12.5px}
.in:hover .gf-root,.in:focus-visible .gf-root{--gf-lift:-48px;--gf-stack:22px}
/* white paper behind the glass would wash it out: the smoked tint is a step denser */
.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(16,16,18,.6) 0%,rgba(12,12,14,.8) 46%,rgba(8,8,10,.96) 100%)}
.gf-root .gf-mark{width:86px;height:86px;right:34px;top:40px;mix-blend-mode:normal;opacity:.13}
.in:hover .gf-mark,.in:focus-visible .gf-mark{opacity:.22}
.gf-root .gf-mark{top:28px}
@media (max-width:900px),(hover:none){.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(26,26,29,.97) 0%,rgba(14,14,16,.98) 46%,rgba(8,8,10,.99) 100%)}}
.gf-root .gf-mark{right:auto;left:26px;top:30px;transform:translate(calc(var(--gf-px) * 3px),calc(var(--gf-py) * -2px))}
.gf-root .gf-mark{width:66px;height:66px;top:34px}
.gf-root .gf-mark{left:38px}
/* the template's liquid print is back on the folders, so the halftone dots on the back are off */
.gf-back::after{content:none}
.gf-root[data-tone="dark"] .gf-back{background:linear-gradient(180deg,#2a2a2e 0%,#121214 100%)}
/* back to the template's smoked glass: clear at the top, the print shows through blurred */
.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(18,18,20,.18) 0%,rgba(14,14,16,.62) 46%,rgba(8,8,10,.94) 100%)}
@media (max-width:900px),(hover:none){.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(18,18,20,.55) 0%,rgba(14,14,16,.8) 46%,rgba(8,8,10,.96) 100%)}}
/* the back panel: a still from the background film, dimmed and slightly lifted, it drifts with the pointer */
.gf-root .gf-still{width:364px;height:296px;object-fit:cover;opacity:.9;filter:brightness(.92) contrast(1.05)}
.in:hover .gf-still,.in:focus-visible .gf-still{opacity:1;filter:brightness(1.05) contrast(1.05)}
/* ?fb=1 brushed steel: fine horizontal grain, a soft band of light that follows the pointer */
.gf-root[data-tone] .gf-back.fb1{background:linear-gradient(105deg,#0000 calc(30% + var(--gf-px) * 12%),#ffffff2e calc(46% + var(--gf-px) * 12%),#0000 calc(62% + var(--gf-px) * 12%)),repeating-linear-gradient(0deg,#ffffff0a 0 1px,#0000 1px 3px),linear-gradient(180deg,#5c5c62 0%,#2a2a2e 45%,#151517 100%)}
/* ?fb=2 light leak: two soft blurred lights, each folder lit from a different side */
.gf-root[data-tone] .gf-back.fb2{background:radial-gradient(60% 70% at calc(20% + var(--i) * 13%) 20%,#ffffffb3,#fff0 70%),radial-gradient(70% 80% at calc(85% - var(--i) * 9%) 70%,#9a9aa0b3,#0000 70%),#1a1a1d;filter:blur(.5px)}
/* ?fb=3 gothic lace: a tracery of arches printed in silver */
.gf-root[data-tone] .gf-back.fb3{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='60' viewBox='0 0 48 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.32' stroke-width='1'%3E%3Cpath d='M0 60V30Q0 6 24 0Q48 6 48 30V60'/%3E%3Cpath d='M8 60V32Q8 14 24 9Q40 14 40 32V60'/%3E%3Cpath d='M24 9V60M8 38H40'/%3E%3Ccircle cx='24' cy='24' r='5'/%3E%3C/g%3E%3C/svg%3E") 0 0/48px 60px,radial-gradient(90% 80% at 50% 0%,#3a3a3f,#141416 75%)}
/* ?fb=4 halftone gradient: big dots shrinking downward, like the site background but bolder */
.gf-root[data-tone] .gf-back.fb4{background:radial-gradient(circle,#ffffffa6 0 2.6px,#fff0 3px) 0 0/10px 10px,#141416;-webkit-mask:none}
.gf-root[data-tone] .gf-back.fb4::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#14141600 0%,#141416d9 60%,#141416 100%)}
/* ?fb=5 obsidian: plain glossy black with one sharp reflection */
.gf-root[data-tone] .gf-back.fb5{background:linear-gradient(115deg,#0000 38%,#ffffff40 44%,#ffffff12 47%,#0000 56%),radial-gradient(120% 90% at 30% 0%,#3a3a40,#0b0b0c 70%)}
/* default: a black folder — black lacquer back with a lit top edge and one soft reflection, black smoked glass in front */
.gf-root[data-tone] .gf-back.fb0{background:linear-gradient(112deg,#0000 calc(40% + var(--gf-px) * 8%),#ffffff14 calc(47% + var(--gf-px) * 8%),#0000 calc(56% + var(--gf-px) * 8%)),linear-gradient(180deg,#1c1c1f 0%,#0a0a0b 38%,#050505 100%)}
.gf-root[data-tone] .gf-back.fb0 .gf-back-sheen{background:linear-gradient(180deg,#ffffff1f 0%,#fff0 12%)}
.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(8,8,9,.62) 0%,rgba(6,6,7,.86) 46%,rgba(3,3,4,.97) 100%)}
.gf-root[data-tone="dark"] .gf-back-rim path{stroke:rgba(255,255,255,.14)}
.gf-root[data-tone="dark"] .gf-front-rim{opacity:.45}
@media (max-width:900px),(hover:none){.gf-root[data-tone="dark"] .gf-tint{background:linear-gradient(180deg,rgba(10,10,11,.92) 0%,rgba(6,6,7,.97) 46%,#030304 100%)}}
/* no white haze in the glass: the pointer highlight is off, and the white sheets stay out of sight until the folder opens */
.gf-root .gf-spec{display:none}
.gf-root[data-entered] .gf-sheet{opacity:0}
.in:hover .gf-root[data-entered] .gf-sheet,.in:focus-visible .gf-root[data-entered] .gf-sheet{opacity:1}
@media (max-width:900px),(hover:none){.gf-root .gf-files{display:none}}
/* the symbol lights up when the folder is hovered */
.gf-root .gf-mark{transition:opacity .45s var(--gf-ease),filter .45s var(--gf-ease),transform .9s var(--gf-ease)}
.in:hover .gf-mark,.in:focus-visible .gf-mark{opacity:.95;filter:drop-shadow(0 0 6px #ffffffb3) drop-shadow(0 0 18px #ffffff59)}

/* depth: the folder has thickness — a lit top bevel, a darker bottom lip, an inner shadow under the glass,
   a stronger tilt toward the pointer and a two-layer shadow on the desk */
.gf-tilt{transform:perspective(1100px) rotateX(calc(var(--gf-py) * -7deg)) rotateY(calc(var(--gf-px) * 9deg));transform-style:preserve-3d}
.in:hover .gf-tilt{transform:perspective(1100px) rotateX(calc(var(--gf-py) * -7deg + 4deg)) rotateY(calc(var(--gf-px) * 9deg)) translateZ(12px)}
.gf-root .gf-shadow{bottom:-18px;height:70px;opacity:.9;filter:blur(26px);transform:translate(calc(var(--gf-px) * -16px),calc(var(--gf-py) * -6px)) scale(.96)}
.in:hover .gf-root .gf-shadow{transform:translate(calc(var(--gf-px) * -22px),8px) scale(1.02);opacity:1}
.gf-root::after{content:"";position:absolute;left:6%;right:6%;bottom:-2px;height:14px;border-radius:50%;background:#000;filter:blur(6px);opacity:.75;pointer-events:none;z-index:-1}
/* back wall: inner shadow at the pocket so it reads as a hollow behind the glass */
.gf-root[data-tone] .gf-back.fb0{box-shadow:inset 0 1px 0 #ffffff2e,inset 0 -40px 50px -20px #000}
/* front glass: a bevel — bright top edge, dark bottom lip, side shading that moves with the tilt */
.gf-front::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#ffffff2b 0,#ffffff00 7px),linear-gradient(0deg,#000000b3 0,#0000 10px),
  linear-gradient(90deg,rgba(0,0,0,calc(.25 + var(--gf-px) * .25)) 0,#0000 22%,#0000 78%,rgba(0,0,0,calc(.25 - var(--gf-px) * .25)) 100%)}
.gf-root .gf-label,.gf-root .gf-key,.gf-root .gf-mark{transform:translateZ(18px)}
.gf-root .gf-key{box-shadow:inset 0 1px 0 #fff,inset 0 -4px 8px #0003,0 0 0 1px #0007,0 18px 26px -8px #000,0 4px 8px -2px #0009}
@media (max-width:900px),(hover:none){.gf-tilt,.in:hover .gf-tilt{transform:none}}
@media (prefers-reduced-motion:reduce){.gf-tilt,.in:hover .gf-tilt{transform:none}}
/* keep the flat stacking (z-index) of the template: no 3D sorting inside the folder, the depth comes from tilt, bevel and shadows */
.gf-tilt{transform-style:flat}
.gf-root .gf-label,.gf-root .gf-mark{transform:none}
.gf-root .gf-key{transform:none}
.in:hover .gf-key{transform:translateY(-3px)}

/* Solid panel edges share the cover's hinge, preserving the glass compositing. */
.gf-solid{position:absolute;pointer-events:none;overflow:visible;max-width:none;fill:#171719;stroke:#454548;stroke-width:1;stroke-linejoin:round}
.gf-back-solid{inset:0;width:340px;height:272px;transform:translate(3px,5px);filter:drop-shadow(1px 2px 0 #080809) drop-shadow(0 12px 12px #0008)}
.gf-front-solid{left:0;top:74px;width:340px;height:198px;z-index:9;transform-origin:50% 100%;transform:perspective(760px) rotateX(var(--gf-hinge)) translate(0,5px);transition:transform .8s var(--gf-spring),translate 1s var(--gf-ease),opacity 1s var(--gf-ease);filter:drop-shadow(0 2px 0 #060607) drop-shadow(0 10px 8px #0009)}
.gf-root{--gf-hinge:-6deg}
.in:hover .gf-root,.in:focus-visible .gf-root{--gf-hinge:-17deg}
.gf-tilt{transform:perspective(1100px) rotateX(calc(4deg + var(--gf-py) * -5deg)) rotateY(calc(-5deg + var(--gf-px) * 7deg))}
.in:hover .gf-tilt,.in:focus-visible .gf-tilt{transform:perspective(1100px) rotateX(calc(6deg + var(--gf-py) * -5deg)) rotateY(calc(-5deg + var(--gf-px) * 7deg)) translateY(-3px)}
.gf-front::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 2px 0 3px #ffffff0d,inset -3px 0 5px #0009,inset 0 -5px 8px #000; border-radius:22px}
.gf-root[data-tone="dark"] .gf-front-rim{opacity:.65;filter:drop-shadow(0 1px 0 #000)}
.gf-root[data-tone="dark"] .gf-back-rim path{stroke:#ffffff30}
.gf-back-sheen{box-shadow:inset 0 -65px 55px -30px #000}
.gf-root:not([data-entered]) .gf-solid{opacity:0;translate:0 22px}
.gf-root[data-entered] .gf-front-solid{transition-delay:0s,.42s,.42s}
@media(max-width:900px),(hover:none){.gf-tilt,.in:hover .gf-tilt,.in:focus-visible .gf-tilt{transform:perspective(1100px) rotateX(3deg) rotateY(-4deg)}}
@media(prefers-reduced-motion:reduce){.gf-tilt,.in:hover .gf-tilt,.in:focus-visible .gf-tilt{transform:perspective(1100px) rotateX(3deg) rotateY(-4deg)}}