:root {
--lime: #b4da55;
--lime-soft: rgba(180, 218, 85, .55);
--crumple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='6' seed='11' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='7'%3E%3CfeDistantLight azimuth='225' elevation='56'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.55' intercept='.55'/%3E%3CfeFuncG type='linear' slope='.55' intercept='.55'/%3E%3CfeFuncB type='linear' slope='.55' intercept='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
--weave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .05' numOctaves='2' seed='3' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .85' numOctaves='2' seed='8' stitchTiles='stitch' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k2='.5' k3='.5'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .55 0 0 0 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
--canvas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .05' numOctaves='2' seed='3' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .85' numOctaves='2' seed='8' stitchTiles='stitch' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k2='.5' k3='.5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .15 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}
body {
background-color: var(--paper);
background-image: var(--crumple);
background-size: 900px 900px;
background-blend-mode: multiply;
}
.tile:not(.grain):not(.grain-dark):not(.tile-line):not(.tile-member),
.folder:not(.folder-dark) .folder-tab,
.folder:not(.folder-dark) .folder-body,
.review:not(.review-dark) {
background-image: var(--canvas);
background-size: 240px 240px;
}
.tile-woven {
background-color: #0f1011;
background-image: var(--weave-light), var(--grain-dark);
background-size: 240px 240px, 160px;
}
.player-tag { color: var(--lime); }
.player.is-playing .player-btn, .vault li.is-playing .play-btn { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.vault li[data-player]::after { background: var(--lime); }
.art-disc-label { fill: var(--lime); }
.art-swash path { stroke: var(--lime); opacity: 1; }
.art-stamp { color: var(--lime); }
.art-spark { stroke: var(--lime); }
.art-envelope-seal { fill: var(--lime); }
.art-radio-dial { fill: var(--lime); }
.art-vault-dial, .art-tape-hub { fill: var(--lime); }
.art-map-stop:last-of-type circle, .art-map-goal { fill: var(--lime); }
.art-map-stop:last-of-type text { fill: var(--ink); }
.art-door-glow { background: radial-gradient(ellipse 70% 55% at 50% 78%, var(--lime-soft), transparent 70%); }
.sale-step-n { background: var(--lime); border-color: var(--lime); }
.sale-before-item { background-image: var(--canvas); background-size: 240px 240px; }
.wave rect.on { fill: var(--lime); }
.lib-focus { color: var(--lime); }
.art-sleeve { background-image: var(--canvas); background-size: 240px 240px; }
.cta-band .lib-members a { color: var(--lime); }
.lib-card:nth-child(4n+1) { background-image: var(--weave-light); background-size: 240px 240px; background-color: #0f1011; }
.lib-card:nth-child(4n+2) { background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.5px); background-size: 14px 14px; }
.lib-card:nth-child(4n+3) { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 9px); background-color: #1b1d20; }
.lib-card:nth-child(4n+4) { background-image: var(--grain-dark); background-size: 160px; }
.tile-member .lib-members a, .sale-order .lib-members a { color: var(--lime); }
::selection { background: var(--lime); color: var(--ink); }
.scribble .scribble-ink { fill: var(--lime); }
.mast-nav a, .hero-col a {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23b4da55' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M4 8C70 3 190 2 296 7'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M20 15C90 11 200 11 280 14'/%3E%3C/g%3E%3C/svg%3E");
background-position: 0 100%;
background-size: 0 9px;
transition: background-size .4s var(--ease);
}
.mast-nav a { padding-bottom: 12px; margin-bottom: -8px; }
.hero-col a { padding-bottom: 9px; }
.mast-nav a.is-active { background-size: 100% 9px; }
@media (hover: hover) { .mast-nav a:hover, .hero-col a:hover { background-size: 100% 9px; } }
@media (hover: hover) { .footer-links a:hover { color: var(--lime); } }
.email { background-image: linear-gradient(var(--lime), var(--lime)); }
.link-arrow svg { transition: transform .35s var(--ease), stroke .2s; }
@media (hover: hover) { .link-arrow:hover svg { stroke: var(--lime); } }
@media (hover: hover) { .btn:hover { box-shadow: 0 6px 0 -1px var(--lime); } }
@media (hover: hover) { .btn-paper:hover { box-shadow: 0 6px 0 -1px var(--lime); } }
@media (hover: hover) { .btn-lime:hover, .book-pop-panel .btn-ink:hover, .book-time .next-card .btn-ink:hover { box-shadow: 0 6px 0 -1px #7f9e33; } }
@media (hover: hover) { .icon-btn:hover { box-shadow: 0 5px 0 -1px var(--lime); } }
.rail span { transition: opacity .3s, transform .4s var(--ease), background-color .2s; }
@media (hover: hover) { .rail a:hover span { background-color: var(--lime); color: var(--ink); } }
.rail a::after { transition: width .4s var(--ease), background-size .2s; }
@media (hover: hover) { .rail a:hover::after {
background-image: linear-gradient(var(--lime), var(--lime));
background-size: 100% 3px;
} }
.folder-tab.is-active { text-decoration-color: var(--lime); text-decoration-thickness: 4px; }
.tile-line .eyebrow, .tile-member .eyebrow, .footer-panel .eyebrow { color: var(--lime); }
.live-dot { background: var(--lime); animation-name: pulse-lime; }
.next-star { color: var(--lime); }
.rec-tag { color: var(--lime); }
.sale-hero .rec-tag { color: var(--ink); background: var(--lime); padding: 3px 6px; border-radius: 4px; }
.tz-time { background-image: linear-gradient(var(--lime-soft), var(--lime-soft)); background-size: 100% 45%; background-position: 0 90%; background-repeat: no-repeat; padding: 0 2px; }
@keyframes pulse-lime {
0% { box-shadow: 0 0 0 0 rgba(180, 218, 85, .55); }
70% { box-shadow: 0 0 0 10px rgba(180, 218, 85, 0); }
100% { box-shadow: 0 0 0 0 rgba(180, 218, 85, 0); }
}
.vault-icon { transition: background-color .25s, color .25s, border-color .25s; }
@media (hover: hover) { .vault li:hover .vault-icon { background: var(--lime); color: var(--ink); border-color: var(--lime); } }
.review-dark .tag { color: var(--lime); border-color: var(--lime); }
.row-main.is-clickable h4 { text-decoration: underline 3px transparent; text-underline-offset: 5px; transition: text-decoration-color .25s, opacity .3s; }
@media (hover: hover) { .row-main.is-clickable:hover h4 { text-decoration-color: var(--lime); } }
.row-info span, .detail-less span, .folder-back { background: linear-gradient(var(--lime), var(--lime)) 0 92% / 0 5px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .row-info:hover span, .detail-less:hover span, .folder-back:hover { background-size: 100% 5px; } }
.mod-link span, .faq-ask span { background: linear-gradient(var(--lime), var(--lime)) 0 92% / 0 6px no-repeat; transition: background-size .4s var(--ease); }
@media (hover: hover) { .faq-ask:hover span, .mod-link:hover span { background-size: 100% 6px; } }
.orbit .ow { animation: ow-lit 6s linear infinite; animation-delay: calc(var(--n) * 1s); }
@keyframes ow-lit {
0%, 18%, 100% { fill: var(--ink); }
3%, 15% { fill: var(--lime); }
}
.spark { stroke: var(--lime); stroke-width: 5.5; }
.spark-b { stroke-width: 3.4; }
@media (hover: none) {
.mast-nav a:active, .hero-col a:active { background-size: 100% 9px; }
.footer-links a:active { color: var(--lime); }
.link-arrow:active svg { stroke: var(--lime); }
.btn:active { box-shadow: 0 6px 0 -1px var(--lime); }
.btn-lime:active, .book-pop-panel .btn-ink:active, .book-time .next-card .btn-ink:active { box-shadow: 0 6px 0 -1px #7f9e33; }
.btn-paper:active { box-shadow: 0 6px 0 -1px var(--lime); }
.icon-btn:active { box-shadow: 0 5px 0 -1px var(--lime); }
.row-main.is-clickable:active h4 { text-decoration-color: var(--lime); }
.row-info:active span, .detail-less:active span, .folder-back:active { background-size: 100% 5px; }
.faq-ask:active span, .mod-link:active span { background-size: 100% 6px; }
}
.define-head { border-bottom-color: var(--lime); }
.mod-dialog { box-shadow: 10px 10px 0 var(--lime); }
.checks li::after { background-color: var(--lime); }
.price-badge { background: var(--lime); color: var(--ink); }
@media (hover: hover) { .board-cap:hover { border-color: var(--lime); color: var(--lime); } .cap-sizes button:hover, .cap-sizes button:hover span { border-color: var(--lime); color: var(--lime); } .cap-dialog .cap-download:hover { background: #000; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } .cap-change:hover, .cap-ig:hover { color: var(--lime); } .cap-ig:hover { transform: rotate(-6deg); } .cap-zoom:hover { border-color: var(--lime); color: var(--lime); } .cap-dialog .icon-btn:hover { background: #fff; color: #000; } }
@media (hover: none) { .board-cap:active { border-color: var(--lime); color: var(--lime); } .cap-sizes button:active { background: var(--lime); border-color: var(--lime); color: #000; } .cap-sizes button:active span { color: #000; } .cap-ig:active, .cap-zoom:active { color: var(--lime); border-color: var(--lime); } }
.tile-board.is-paused .board-cap-img { border-color: var(--lime); color: var(--lime); }
.cap-dialog { box-shadow: 10px 10px 0 var(--lime); }
@media (hover: hover) { .cap-dialog .cap-download:active { background: var(--lime); border-color: var(--lime); color: #000; transform: none; box-shadow: 0 0 0 var(--lime); } }
@media (hover: none) { .cap-dialog .cap-download:active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } }
.cap-sizes button:active { background: var(--lime); border-color: var(--lime); color: #000; } .cap-sizes button:active span { color: #000; }
@media (hover: hover) { .cap-handle:hover { color: var(--lime); } }
.cap-handle:active { color: var(--lime); }
@media (hover: hover) { .social-ico:hover, .footer-handle:hover { color: var(--lime); } .social-ico:hover { transform: rotate(-6deg); } .social-link:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } .social-close:hover { background: #fff; color: #000; } .social-link:active { background: var(--lime); border-color: var(--lime); color: #000; transform: none; box-shadow: none; } }
@media (hover: none) { .social-ico:active, .footer-handle:active { color: var(--lime); } .social-link:active { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime); } }
.social-dialog { box-shadow: 10px 10px 0 var(--lime); }
.sale-qty button[aria-checked="true"] { background: var(--lime); border-color: var(--lime); }
@media (hover: hover) { .sale-qty button:hover, .sale-cur select:hover { border-color: var(--lime); } }
.sale-each strong { color: var(--lime); font-weight: 700; }
.sale-rec-star, .sale-rec span { color: var(--lime); }
.row-info, .detail-less, .folder-dark .row-info, .folder-dark .detail-less { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 5px; border-radius: 5px; background: var(--lime); color: var(--ink); font-size: 10.5px; box-shadow: 0 1px 2px -1px rgba(22, 24, 26, .25); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.row-info i, .detail-less i { font-size: 13px; }
.folder-dark .row-info, .folder-dark .detail-less { box-shadow: none; }
@media (hover: hover) { .row-info:hover, .detail-less:hover { transform: translateY(-1px); box-shadow: 0 2px 6px -2px rgba(22, 24, 26, .3); } }
.row-info:focus-visible, .detail-less:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheen { overflow: hidden; isolation: isolate; }
.btn.sheen { position: relative; }
@media (max-width: 900px) { .sale-order.sheen, .sale-order.oil { position: relative; } }
.sheen::before {
content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
background: linear-gradient(225deg, transparent 38%, rgba(255, 140, 60, .38) 44%, rgba(190, 70, 230, .4) 50%, rgba(60, 200, 140, .32) 56%, transparent 62%);
filter: blur(28px); mix-blend-mode: screen; opacity: 0;
animation: sheen-sweep 5s ease-in-out infinite;
}
@keyframes sheen-sweep {
0% { transform: translate(35%, -35%); opacity: 0; }
10% { opacity: 1; }
45% { opacity: .9; }
60%, 100% { transform: translate(-35%, 35%); opacity: 0; }
}
.btn.sheen::before { filter: blur(10px); animation-duration: 4s; }
@media (prefers-reduced-motion: reduce) {
.sheen::before { animation: none; opacity: .35; transform: translate(10%, -10%); }
}
.buy-tag { display: inline-flex; align-items: stretch; height: 34px; border: 1.5px solid rgba(241, 242, 242, .5); border-radius: var(--r-btn); color: var(--on-night); text-decoration: none; overflow: hidden; transition: border-color .2s var(--ease); }
.buy-tag-k { display: flex; align-items: center; padding: 0 11px; font: 700 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.buy-tag-p { display: flex; align-items: center; gap: 6px; padding: 0 11px; border-left: 1.5px solid rgba(241, 242, 242, .5); font: 400 16px/1 var(--display); white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.buy-tag-p .was { font-size: 13px; color: var(--lime); opacity: .85; }
@media (hover: hover) {
.buy-tag:hover { border-color: var(--lime); }
.buy-tag:hover .buy-tag-p { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.buy-tag:hover .buy-tag-p .was { color: var(--ink); opacity: .55; }
}
.buy-tag:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.vault-unlocked .lib-card .buy-tag { display: none; }
.vault-unlocked .lib-card .lib-card-actions { justify-content: flex-end; }
.text-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.folder-dark .text-link, .hiw .text-link, .quiz-main .text-link, .member-plan--dark .text-link, .tile-member .text-link, .sale-order .text-link, .lib-card .text-link, .lib-more .text-link, .cta-band .text-link, .review-dark .text-link { color: var(--lime); text-decoration: none; }
.release-links .text-link { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: auto; text-underline-offset: 3px; }
@media (hover: hover) {
.text-link:hover { background: var(--lime); text-decoration: none; }
.folder-dark .text-link:hover, .hiw .text-link:hover, .quiz-main .text-link:hover, .member-plan--dark .text-link:hover, .tile-member .text-link:hover, .sale-order .text-link:hover, .lib-card .text-link:hover, .lib-more .text-link:hover, .cta-band .text-link:hover, .review-dark .text-link:hover { background: none; filter: brightness(1.12); }
}
.row .row-main p.row-perk { margin-top: 6px; font-size: 14px; color: var(--lime); }
.row-perk .text-link { color: inherit; font-weight: 700; }
.row-perk::before { content: "✦ "; color: var(--lime); }
.row-perk.has-list::before { content: none; }
.row-tag { display: inline-block; margin-left: 10px; padding: 3px 8px 2px; border-radius: 5px; background: var(--lime); color: #16181a; font: 400 12px/1.2 var(--display); letter-spacing: .02em; -webkit-text-stroke: 0; vertical-align: middle; white-space: nowrap; }
.folder-dark .row-meta { display: none; }
.row-perks { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 14px; color: var(--lime); }
.row-perks li { position: relative; padding-left: 16px; }
.row-perks li::before { content: "✦"; position: absolute; left: 0; top: .2em; font-size: 9px; color: var(--lime); }
.row-perks .text-link { color: inherit; font-weight: 700; }
@media (hover: hover) { .row-perk .text-link:hover { text-decoration: underline; text-underline-offset: 3px; filter: none; } }
.cur-select, .sale-cur select, .sale-cur.lib-cur select { border: 1.5px solid var(--lime); box-shadow: 0 0 0 2px rgba(180, 218, 85, .3), 0 0 12px rgba(180, 218, 85, .45); transition: box-shadow .2s; }
.cur-select { color: var(--ink); }
.folder-dark .cur-select { color: var(--on-night); color-scheme: dark; }
.folder-dark .cur-select, .session-book .sale-cur select, .book-time .sale-cur select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b4da55' stroke-width='1.4'/%3E%3C/svg%3E"); }
@media (hover: hover) { .cur-select:hover, .sale-cur select:hover, .sale-cur.lib-cur select:hover { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(180, 218, 85, .55), 0 0 16px rgba(180, 218, 85, .7); } }