:root {
--void: #0b0a09;
--void-2: #141210;
--chalk: #ece8e0;
--chalk-dim: #9c968b;
--chalk-faint: #5d584f;
--blood: #d24a3c;
--paper-a: #efe7d4;
--paper-b: #e2d4b0;
--paper-c: #f3eee2;
--hand: "Reenie Beanie", "Comic Sans MS", cursive;
--serif: "EB Garamond", Georgia, serif;
--type: "Special Elite", "Courier New", monospace;
--title: "Rock Salt", "Reenie Beanie", cursive;
--aged-color: #e6d9b8;
--aged: linear-gradient(180deg, transparent 0 85%, rgba(120,78,30,.14) 100%), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27900%27 height=%271500%27%3E%0A%3Cdefs%3E%3Cfilter id=%27r%27 x=%27-20%25%27 y=%27-20%25%27 width=%27140%25%27 height=%27140%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.035%27 numOctaves=%273%27 seed=%277%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 scale=%2738%27/%3E%3CfeGaussianBlur stdDeviation=%271.2%27/%3E%3C/filter%3E%0A%3Cfilter id=%27e%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.06%27 numOctaves=%272%27 seed=%272%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 scale=%279%27/%3E%3C/filter%3E%3C/defs%3E%0A%3Cg filter=%27url%28%23r%29%27%3E%0A%3Cellipse cx=%27740%27 cy=%27210%27 rx=%27120%27 ry=%2790%27 fill=%27rgba%28150,100,40,.18%29%27/%3E%0A%3Cellipse cx=%27120%27 cy=%27880%27 rx=%27160%27 ry=%27110%27 fill=%27rgba%28140,92,35,.15%29%27/%3E%0A%3Cellipse cx=%27620%27 cy=%271290%27 rx=%2790%27 ry=%27140%27 fill=%27rgba%28130,85,30,.16%29%27/%3E%0A%3Cellipse cx=%27300%27 cy=%27420%27 rx=%2760%27 ry=%2745%27 fill=%27rgba%28150,100,40,.13%29%27/%3E%0A%3C/g%3E%0A%3Cg filter=%27url%28%23e%29%27 fill=%27none%27%3E%0A%3Ccircle cx=%27690%27 cy=%27700%27 r=%2774%27 stroke=%27rgba%28115,65,20,.32%29%27 stroke-width=%275%27 stroke-dasharray=%27400 65%27/%3E%0A%3Ccircle cx=%27690%27 cy=%27700%27 r=%2770%27 stroke=%27rgba%28115,65,20,.13%29%27 stroke-width=%279%27/%3E%0A%3Ccircle cx=%27180%27 cy=%271360%27 r=%2760%27 stroke=%27rgba%28115,65,20,.26%29%27 stroke-width=%274%27 stroke-dasharray=%27300 80%27/%3E%0A%3C/g%3E%0A%3Cg fill=%27rgba%28125,75,25,.32%29%27%3E%0A%3Ccircle cx=%2780%27 cy=%27120%27 r=%273%27/%3E%3Ccircle cx=%2796%27 cy=%27140%27 r=%272%27/%3E%3Ccircle cx=%27842%27 cy=%27540%27 r=%272.5%27/%3E%3Ccircle cx=%27430%27 cy=%271010%27 r=%273.5%27/%3E%3Ccircle cx=%27446%27 cy=%271022%27 r=%271.8%27/%3E%3Ccircle cx=%27860%27 cy=%271140%27 r=%272.2%27/%3E%3Ccircle cx=%2756%27 cy=%27600%27 r=%272%27/%3E%3Ccircle cx=%27520%27 cy=%2780%27 r=%271.6%27/%3E%0A%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27520%27 height=%27520%27%3E%3Cfilter id=%27f%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.012 .09%27 numOctaves=%272%27 seed=%274%27/%3E%3CfeColorMatrix values=%270 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .35 -.08%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23f%29%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27260%27 height=%27260%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .55 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E"), radial-gradient(ellipse at 30% 10%, rgba(255,250,235,.45), transparent 60%);
--aged-size: auto, 900px 1500px, 520px 520px, 260px 260px, auto;
--aged-shadow: inset 0 0 60px rgba(110,70,25,.34), inset 0 0 7px rgba(80,50,20,.38), 0 18px 44px rgba(0,0,0,.6);
color-scheme: dark;
}
body.shell {
margin: 0;
background-color: var(--void);
background-image:
repeating-linear-gradient(118deg, rgba(255,255,255,.012) 0 2px, transparent 2px 11px),
repeating-linear-gradient(121deg, rgba(255,255,255,.018) 0 1px, transparent 1px 37px);
color: var(--chalk);
font-family: var(--serif);
font-size: 1.15rem;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
.shell a { color: inherit; }
html:has(body.shell) { background: var(--void); }
.shell .scrap { color: #231e18; }
.shell ::selection { background: var(--chalk); color: var(--void); }
.shell .wrap { max-width: 72rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.shell main, .shell header, .shell footer { position: relative; z-index: 2; }
#spatter { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.shell .top { position: absolute; inset: 0 0 auto; z-index: 5; }
.shell .top .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; }
.shell .mark { font-family: var(--hand); font-size: 2rem; line-height: 1; text-decoration: none; color: var(--chalk); letter-spacing: .02em; }
.shell .menu { display: flex; gap: .4rem 1.6rem; flex-wrap: wrap; }
.shell .menu a { font-family: var(--hand); font-size: 1.75rem; line-height: 1; text-decoration: none; color: var(--chalk-dim); position: relative; padding-bottom: .25rem; transition: color .3s; }
.shell .menu a::after {
content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 8px; opacity: 0; transition: opacity .25s;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 L12 3 L22 6 L35 2 L48 6 L61 3 L74 6 L86 2 L99 5' fill='none' stroke='%23ece8e0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.shell .menu a:hover, .shell .menu a:focus-visible, .shell .menu a[aria-current="page"] { color: var(--chalk); outline: none; }
.shell .menu a:hover::after, .shell .menu a:focus-visible::after, .shell .menu a[aria-current="page"]::after { opacity: .8; }
.lair { background: radial-gradient(ellipse at 20% 22%, #1b1815 0%, transparent 62%); position: relative; min-height: clamp(560px, 92vh, 960px); display: flex; align-items: flex-end; overflow: hidden; }
.face {
position: absolute; z-index: 0; top: 4%; left: -9%; width: min(118vh, 1180px, 118vw); aspect-ratio: 1400 / 1056; max-width: none;
transform: translate(var(--lx, 0px), var(--ly, 0px)) rotate(var(--lr, 0deg)); transition: transform 1.8s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
}
.face img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.face .upper { clip-path: inset(0 0 63.5% 0); }
.face .mouth { clip-path: inset(36.5% 0 0 0); transform-origin: 30% 36.5%; transform: scaleY(var(--grin, 1)); transition: transform 4s ease; }
.face .eye {
position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%; margin: -6.5% 0 0 -6.5%;
background: radial-gradient(circle, rgba(255,252,244,.55) 0%, rgba(255,252,244,.12) 38%, transparent 68%);
transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .9s ease-out; mix-blend-mode: screen;
animation: breathe 6s ease-in-out infinite;
}
.face .eye.l { left: 18%; top: 17%; }
.face .eye.r { left: 42%; top: 19.5%; animation-delay: -2.2s; }
@keyframes breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.lair::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(90deg, transparent 38%, rgba(11,10,9,.55) 70%, var(--void) 100%), linear-gradient(180deg, transparent 70%, rgba(11,10,9,.6) 100%);
}
.lair .say { position: relative; z-index: 1; margin-left: auto; width: min(27rem, 100%); padding-block: 0 8vh; }
.hook { font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.4; margin: 0 0 1.6rem; text-wrap: balance; }
.hook em { font-style: normal; }
.asks { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; align-items: baseline; }
.scrawl {
font-family: var(--hand); font-size: 2.1rem; line-height: 1; text-decoration: none; color: var(--chalk);
display: inline-flex; gap: .4rem; align-items: baseline; position: relative; padding-bottom: .3rem;
}
.scrawl::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; opacity: .55; transition: opacity .25s, transform .4s;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 9' preserveAspectRatio='none'%3E%3Cpath d='M1 6 L9 3 L18 7 L28 2 L39 7 L50 3 L61 7 L72 2 L83 7 L99 4' fill='none' stroke='%23ece8e0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
transform-origin: left; transform: scaleX(.82);
}
.scrawl:hover::after, .scrawl:focus-visible::after { opacity: 1; transform: scaleX(1); }
.scrawl:focus-visible { outline: none; }
.scrawl.quiet { color: var(--chalk-dim); font-size: 1.7rem; }
.found { padding-block: 5rem 4rem; }
.found-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 2.6rem; }
.found h2 { font-family: var(--title); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.35; margin: 0; text-wrap: balance; letter-spacing: 0; }
.found-sub { color: var(--chalk-dim); font-style: italic; margin: 0; }
.scraps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; align-items: start; }
.scrap {
display: grid; gap: .5rem; text-decoration: none; color: #231e18; padding: 1.9rem 1.7rem 2.2rem; min-width: 0;
position: relative; isolation: isolate; filter: drop-shadow(0 16px 20px rgba(0,0,0,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.35));
transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.scrap::before, .scrap::after { content: ""; position: absolute; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.scrap::before { inset: -2px; z-index: -2; background: #f1e9d6; }
.scrap::after {
inset: 0; z-index: -1; background-color: var(--aged-color); background-image: var(--aged); background-size: var(--aged-size);
box-shadow: inset 0 0 38px rgba(110,70,25,.42), inset 0 0 12px rgba(90,55,20,.35);
}
.scrap:nth-child(1)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%273%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 seed=%276%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%277%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%276%27 y=%276%27 width=%27388%27 height=%27288%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%273%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 seed=%276%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%277%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%276%27 y=%276%27 width=%27388%27 height=%27288%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); }
.scrap:nth-child(1)::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%273%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.35%27 numOctaves=%272%27 seed=%2710%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%273.5%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%279%27 y=%279%27 width=%27382%27 height=%27282%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%273%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.35%27 numOctaves=%272%27 seed=%2710%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%273.5%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%279%27 y=%279%27 width=%27382%27 height=%27282%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); }
.scrap:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2711%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 seed=%2714%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%277%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%276%27 y=%276%27 width=%27388%27 height=%27288%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2711%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 seed=%2714%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%277%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%276%27 y=%276%27 width=%27388%27 height=%27288%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); }
.scrap:nth-child(2)::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2711%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.35%27 numOctaves=%272%27 seed=%2718%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%273.5%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%279%27 y=%279%27 width=%27382%27 height=%27282%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2711%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.35%27 numOctaves=%272%27 seed=%2718%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%273.5%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%279%27 y=%279%27 width=%27382%27 height=%27282%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); background-position: 0 0, -300px -500px, 0 0, 0 0, 0 0; }
.scrap:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2723%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 seed=%2726%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%277%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%276%27 y=%276%27 width=%27388%27 height=%27288%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2723%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 seed=%2726%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%277%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%276%27 y=%276%27 width=%27388%27 height=%27288%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); }
.scrap:nth-child(3)::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2723%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.35%27 numOctaves=%272%27 seed=%2730%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%273.5%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%279%27 y=%279%27 width=%27382%27 height=%27282%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 300%27 preserveAspectRatio=%27none%27%3E%3Cfilter id=%27t%27 x=%27-5%25%27 y=%27-5%25%27 width=%27110%25%27 height=%27110%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.03 .045%27 numOctaves=%274%27 seed=%2723%27 result=%27c%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 in2=%27c%27 scale=%2715%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27 result=%27a%27/%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.35%27 numOctaves=%272%27 seed=%2730%27 result=%27f%27/%3E%3CfeDisplacementMap in=%27a%27 in2=%27f%27 scale=%273.5%27 xChannelSelector=%27R%27 yChannelSelector=%27G%27/%3E%3C/filter%3E%3Crect x=%279%27 y=%279%27 width=%27382%27 height=%27282%27 fill=%27white%27 filter=%27url%28%23t%29%27/%3E%3C/svg%3E"); background-position: 0 0, -620px -900px, 0 0, 0 0, 0 0; }
.scrap:nth-child(1) { transform: rotate(-1.8deg); }
.scrap:nth-child(2) { transform: rotate(1.2deg) translateY(1.2rem); }
.scrap:nth-child(3) { transform: rotate(-.9deg) translateY(.4rem); }
.scrap:hover, .scrap:focus-visible { transform: rotate(0deg) translateY(-6px); outline: none; }
.scrap .lbl { font-variant: small-caps; letter-spacing: .16em; font-size: .95rem; color: #6d6150; }
.scrap .ttl { font-size: 1.55rem; line-height: 1.15; }
.scrap .first { font-style: italic; color: #4c4337; font-size: 1.02rem; }
.scrap .go { font-family: var(--hand); font-size: 1.6rem; color: #8d2a20; margin-top: .4rem; }
.found-foot { margin-top: 3.4rem; display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline; }
.found-foot .small { color: var(--chalk-faint); font-size: .95rem; }
.scrawl.soon { color: var(--chalk-faint); cursor: default; }
.scrawl.soon::after { opacity: .2; }
.watch { padding-block: 2rem 4rem; }
.watch .screen { max-width: 52rem; margin: 0 auto; }
.screen { aspect-ratio: 16 / 9; max-width: 100%; background: #050504; border: 1px solid #22201c; position: relative; overflow: hidden; }
.screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-family: var(--hand); font-size: 2rem; color: var(--chalk-faint); }
.tease { padding-block: 3rem 6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: center; }
.tease h2 { font-weight: 400; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1; margin: 0 0 .8rem; }
.tease p { color: var(--chalk-dim); margin: 0 0 1.4rem; max-width: 30rem; }
.shell footer { border-top: 1px solid #1f1d1a; }
.shell footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; padding-block: 2rem 2.6rem; color: var(--chalk-faint); font-size: .92rem; }
.shell footer p { margin: 0; }
.shell .footnote-hidden { color: var(--void); }
.shell .footnote-hidden::selection { background: var(--chalk); color: var(--void); }
.shell .tiny-smile { width: 34px; opacity: .16; }
.shell .tiny-smile path { stroke: var(--chalk); }
.shell .observe { color: var(--chalk-dim); }
.shell .intrude { color: var(--blood); }
.shell .struck { text-decoration-color: var(--blood); }
.shell .return-line { color: var(--blood); }
.ask-wrap { max-width: 46rem; padding-block: 7rem 4rem; }
.ask-wrap .kicker { font-variant: small-caps; letter-spacing: .2em; color: var(--chalk-dim); font-size: 1rem; margin: 0 0 .4rem; }
.ask-wrap h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell .log { display: grid; gap: 1.3rem; margin-bottom: 2.4rem; min-height: 6rem; }
.shell .log p { margin: 0; max-width: 36rem; overflow-wrap: anywhere; }
.shell .log .you { justify-self: start; text-align: left; color: var(--chalk-faint); font-style: italic; font-size: 1.05rem; padding-left: 1.2rem; border-left: 1px solid #2a2723; transition: opacity 3s, color 3s; }
.shell .log .you.swallowed { text-decoration: line-through; text-decoration-color: rgba(210,74,60,.6); opacity: .35; }
.shell .log .him.cut { opacity: .7; }
.shell .log .him { white-space: pre-line; font-family: var(--hand); color: var(--chalk); font-size: 2.2rem; line-height: 1.12; text-shadow: 0 0 14px rgba(255,250,240,.28), 0 0 2px rgba(255,250,240,.5); }
.shell .log .him a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.shell .log .thinking { opacity: .45; }
.shell .ask-form { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; }
.shell .ask-form input {
flex: 1 1 16rem; min-width: 0; font: inherit; font-size: 1.2rem; font-style: italic; padding: .5rem .1rem; color: var(--chalk);
background: transparent; border: 0; border-bottom: 1px solid var(--chalk-faint); border-radius: 0;
}
.shell .ask-form input::placeholder { color: var(--chalk-faint); }
.shell .ask-form input:focus-visible { outline: none; border-bottom-color: var(--chalk); }
.shell .ask-form button { background: none; border: 0; padding: 0 0 .3rem; cursor: pointer; }
.shell .ask-form button:disabled { opacity: .35; cursor: default; }
.shell .ask-note { margin-top: 1rem; font-size: .88rem; color: var(--chalk-faint); }
@media (max-width: 860px) {
.lair { min-height: 0; display: block; padding-top: 4.4rem; }
.face { position: relative; top: 0; left: -14%; width: 128%; margin-bottom: -18%; }
.lair::after { background: linear-gradient(180deg, transparent 45%, var(--void) 88%); }
.lair .say { padding-block: 0 3rem; }
.scraps { grid-template-columns: 1fr; gap: 1.8rem; }
.scrap:nth-child(n) { transform: rotate(-1deg); }
.scrap:nth-child(2) { transform: rotate(1deg); }
.tease { grid-template-columns: 1fr; }
.shell .menu a { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.face, .face .mouth, .face .eye, .scrap { transition: none !important; animation: none !important; }
}
.crop { background: url("art/face.webp") no-repeat; background-size: 200% auto; max-width: 100%; pointer-events: none;
-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
.crop.grin { width: min(380px, 86%); aspect-ratio: 700 / 680; background-position: 0 100%; transform: rotate(-4deg); opacity: .9; }
.crop.peek { width: min(420px, 80vw); aspect-ratio: 700 / 420; background-position: 0 0; margin: 0 0 1.8rem -24px; opacity: .85; animation: breathe 7s ease-in-out infinite; }
.shell.contents .part-title h1 { font-family: var(--title); font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.35; }
.shell .ask-form input.held { color: var(--blood); border-bottom-color: var(--blood); caret-color: transparent; }
html:has(body.askpage), body.askpage { height: 100%; }
body.askpage { overflow: hidden; }
.shell .ask-wrap {
height: 100%; max-width: 46rem; margin: 0 auto; display: flex; flex-direction: column; position: relative;
padding-block: 5rem calc(.8rem + env(safe-area-inset-bottom, 0px));
}
@supports (height: 100dvh) { .shell .ask-wrap { height: 100dvh; } }
.shell .crop.peek.watching {
position: absolute; z-index: 0; top: 4.5rem; left: 50%; width: min(520px, 90vw); margin: 0; transform: translateX(-50%);
opacity: .16; animation: breathe 9s ease-in-out infinite;
}
.shell .log {
position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
display: flex; flex-direction: column; gap: .75rem; margin: 0 0 1rem; padding: 1rem .2rem 1rem;
scrollbar-width: thin; scrollbar-color: #2b2823 transparent;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2.2rem); mask-image: linear-gradient(180deg, transparent 0, #000 2.2rem);
}
.shell .log p { max-width: min(32rem, 84%); margin: 0; }
.shell.askpage .log .him {
align-self: flex-start; padding: .5rem 1rem .55rem; font-family: "Kalam", var(--hand); font-size: 1.12rem; line-height: 1.4;
color: #fbf8f2; text-shadow: none; background: #7a2a22; border: 0; border-radius: 4px 22px 20px 18px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.shell.askpage .log .him.cut { opacity: .65; }
.shell.askpage .log .you {
align-self: flex-end; text-align: left; padding: .5rem 1rem .55rem; border: 1px solid #34302a; color: var(--chalk);
font-family: var(--serif); font-style: normal; font-size: 1.12rem; line-height: 1.4;
background: #24211d; border-radius: 20px 4px 18px 22px; box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.shell.askpage .log .you.swallowed { opacity: .4; text-decoration: line-through; text-decoration-color: var(--blood); }
.shell.askpage .log .him a { color: #fff; }
.shell.askpage .log .date-line { align-self: center; max-width: none; margin: .6rem 0 .1rem; font-size: .8rem; letter-spacing: .04em; color: var(--chalk-faint); background: none; box-shadow: none; padding: 0; }
.shell.askpage .ask-form { position: relative; z-index: 1; flex: 0 0 auto; }
.shell.askpage .ask-note { position: relative; z-index: 1; flex: 0 0 auto; margin-top: .5rem; }
@media (max-width: 600px) {
.shell .ask-wrap { padding-top: 4.4rem; }
.shell.askpage .log .him, .shell.askpage .log .you { font-size: 1.05rem; }
.shell .log p { max-width: 88%; }
}
body.askpage { display: flex; flex-direction: column; }
body.askpage > .top { position: relative; flex: 0 0 auto; }
body.askpage > main.ask-wrap { flex: 1 1 auto; min-height: 0; height: auto; width: 100%; padding-top: .4rem; }
@supports (height: 100dvh) { body.askpage { height: 100dvh; } body.askpage > main.ask-wrap { height: auto; } }
body.askpage .crop.peek.watching { top: 0; }
@media (max-width: 600px) { body.askpage > main.ask-wrap { padding-top: 0; } body.askpage .crop.peek.watching { opacity: .12; } }
.shell.askpage .log > :first-child { margin-top: auto; }
body.askpage > main.ask-app {
flex: 1 1 auto; min-height: 0; width: 100%; max-width: 76rem; margin: 0 auto; display: grid; grid-template-columns: 19rem minmax(0, 1fr);
padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 2;
}
.ask-app h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.threads { min-height: 0; overflow-y: auto; padding: .6rem 1rem 1rem 0; border-right: 1px solid #1f1d1a; display: flex; flex-direction: column; gap: 1.1rem; scrollbar-width: thin; scrollbar-color: #2b2823 transparent; }
.pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.pin, .row { font: inherit; color: inherit; background: none; border: 1px solid transparent; cursor: pointer; position: relative; border-radius: 16px; transition: background .2s, border-color .2s; }
.pin { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .2rem .6rem; }
.pin:hover, .row:hover { background: rgba(236,232,224,.04); }
.pin.on, .row.on { background: rgba(236,232,224,.08); border-color: #2e2a25; }
.pin:focus-visible, .row:focus-visible, .back:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.pin-name { font-size: .95rem; color: var(--chalk-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin.on .pin-name { color: var(--chalk); }
.av {
width: 4.1rem; height: 4.1rem; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; position: relative;
background: radial-gradient(circle at 50% 38%, #24211d, #131110 70%); border: 1px solid #2e2a25;
font-family: var(--hand); font-size: 2.3rem; line-height: 1; color: var(--chalk); text-shadow: 0 0 10px rgba(255,250,240,.25);
}
.av.taken::after { content: ""; position: absolute; left: 50%; bottom: 10%; width: 50%; height: 24%; transform: translateX(-50%); background: var(--blood); -webkit-mask: url("art/grin-sm.png") center / contain no-repeat; mask: url("art/grin-sm.png") center / contain no-repeat; opacity: .95; }
.pin[data-id="father"] .av, .pane-head .av.father { background-image: url("art/face-whole-sm.png"), radial-gradient(circle at 50% 38%, #24211d, #131110 70%); background-size: 64% auto, cover; background-position: center, center; background-repeat: no-repeat; }
.pin[data-id="father"] .av::after, .pane-head .av.father::after { display: none; }
.av.you-av { font-size: 1.35rem; color: var(--chalk-dim); }
.dot { position: absolute; top: .55rem; right: 1.1rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--blood); box-shadow: 0 0 0 3px var(--void); }
.rows { list-style: none; margin: 0; padding: .9rem 0 0; border-top: 1px solid #1f1d1a; }
.row { width: 100%; display: flex; gap: .75rem; align-items: center; text-align: left; padding: .6rem .6rem; }
.row .av { width: 3rem; height: 3rem; font-size: 1rem; }
.row-text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.row-top { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.row-top strong { font-weight: 500; }
.row-top small { color: var(--chalk-faint); font-size: .85rem; }
.row-last { color: var(--chalk-dim); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane { min-height: 0; display: flex; flex-direction: column; position: relative; padding-left: 1.4rem; }
.pane-head { flex: 0 0 auto; display: flex; align-items: center; gap: .8rem; padding: .3rem 0 .7rem; border-bottom: 1px solid #1f1d1a; position: relative; z-index: 2; }
.pane-head .av { width: 2.8rem; height: 2.8rem; font-size: 1.6rem; }
.pane-head .av.you-av { font-size: .95rem; }
.who { display: grid; min-width: 0; }
.who strong { font-weight: 500; font-size: 1.15rem; }
.who small { color: var(--chalk-faint); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { display: none; background: none; border: 0; color: var(--chalk); font-size: 2.4rem; line-height: 1; padding: 0 .4rem 0 0; cursor: pointer; }
.pane .crop.peek.watching { top: 4rem; }
.pane .log { margin-top: .2rem; }
.shell.askpage .log .him { align-self: flex-end; border-radius: 22px 4px 18px 20px; }
.shell.askpage .log .you { align-self: flex-start; border-radius: 4px 20px 22px 18px; }
.shell.askpage .log .status { align-self: flex-end; margin: -.3rem .3rem 0 0; font-size: .82rem; color: var(--chalk-faint); background: none; box-shadow: none; padding: 0; }
.shell.askpage .ask-form.shut input { border-bottom-style: dashed; opacity: .6; }
@media (max-width: 760px) {
body.askpage > main.ask-app { grid-template-columns: minmax(0, 1fr); }
.threads { border-right: 0; padding-right: 0; }
.ask-app.reading .threads { display: none; }
.ask-app:not(.reading) .pane { display: none; }
.pane { padding-left: 0; }
.back { display: block; }
}
.shell [hidden] { display: none !important; }
.shell.askpage .log .receipt { align-self: flex-start; margin: -.45rem 0 0 .5rem; font-size: .78rem; color: var(--chalk-faint); letter-spacing: .02em; }
.shell.askpage .log .typing { align-self: flex-end; display: flex; gap: .3rem; align-items: center; padding: .7rem .95rem; background: #7a2a22; border-radius: 22px 4px 18px 20px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.shell.askpage .log .typing i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(251,248,242,.85); animation: him-dot 1.3s infinite ease-in-out; }
.shell.askpage .log .typing i:nth-child(2) { animation-delay: .18s; }
.shell.askpage .log .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes him-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
:root { --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Roboto, "Segoe UI", Arial, sans-serif; }
body.askpage .ask-app, body.askpage .ask-app .av, body.askpage .ask-app input, body.askpage .ask-app button { font-family: var(--sys); }
body.askpage .ask-app .av { font-size: 1.6rem; font-weight: 500; text-shadow: none; }
body.askpage .ask-app .row .av { font-size: .95rem; }
body.askpage .ask-app .pane-head .av { font-size: 1.15rem; }
body.askpage .ask-app .av.you-av { font-size: .9rem; }
.shell.askpage .log .him, .shell.askpage .log .you { font-family: var(--sys); font-style: normal; font-size: 1.02rem; line-height: 1.35; letter-spacing: -.005em; }
.shell.askpage .log .him { padding: .45rem .85rem .5rem; }
.shell.askpage .log .you { padding: .45rem .85rem .5rem; }
.shell.askpage .log .date-line, .shell.askpage .log .receipt, .shell.askpage .log .status { font-family: var(--sys); }
.shell.askpage .ask-note { font-family: var(--sys); font-size: .78rem; text-align: center; }
.shell.askpage .ask-form { flex-wrap: nowrap; align-items: center; gap: .5rem; margin-top: .3rem; padding: .3rem .3rem .3rem 1rem;
border: 1px solid #3a3631; border-radius: 22px; background: #151311; }
.shell.askpage .ask-form input { flex: 1 1 auto; font-size: 1.02rem; font-style: normal; padding: .35rem 0; border: 0; color: var(--chalk); background: transparent; }
.shell.askpage .ask-form input:focus-visible { border: 0; }
.shell.askpage .ask-form:focus-within { border-color: #5a544b; }
.shell.askpage .ask-form input::placeholder { color: #6f695f; }
.shell.askpage .ask-form .send { flex: 0 0 auto; width: 2.05rem; height: 2.05rem; padding: 0; border-radius: 50%; display: grid; place-items: center;
background: var(--blood); color: #fff; transition: background .15s, opacity .15s; }
.shell.askpage .ask-form .send svg { width: 1.15rem; height: 1.15rem; }
.shell.askpage .ask-form .send:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.shell.askpage .ask-form input:placeholder-shown + .send { background: #3a3631; color: #8c867b; }
.shell.askpage .ask-form input.held { color: var(--blood); caret-color: transparent; }
.shell.askpage .ask-form:has(input.held) { border-color: var(--blood); }
.shell.askpage .ask-form.shut { opacity: .55; }
.shell.askpage .ask-form.shut input { border: 0; }
.shell.askpage .ask-form.shut .send { background: #3a3631; color: #8c867b; }
.av.anon { background: #2a2723 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 40%27%3E%3Ccircle cx=%2720%27 cy=%2715%27 r=%277%27 fill=%27%238c867b%27/%3E%3Cpath d=%27M6 36c1.5-8 7.5-12 14-12s12.5 4 14 12z%27 fill=%27%238c867b%27/%3E%3C/svg%3E") center 60% / 78% no-repeat; border-color: #34302a; }
.rows li + li { border-top: 1px solid #1a1816; }
.row-top strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row-top small { flex: 0 0 auto; white-space: nowrap; }
.pane .crop.whole.watching {
position: absolute; z-index: 0; left: 50%; top: 52%; transform: translate(-50%, -50%);
width: min(480px, 82%); aspect-ratio: 760 / 1056; margin: 0;
background-size: 184% auto; background-position: 0 0;
-webkit-mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 70% 66% at 50% 50%, #000 70%, transparent 100%);
opacity: .28; animation: breathe-whole 9s ease-in-out infinite;
}
@keyframes breathe-whole { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.025); } }
@media (max-width: 760px) { .pane .crop.whole.watching { width: min(380px, 92%); opacity: .22; } }
@media (prefers-reduced-motion: reduce) { .pane .crop.whole.watching { animation: none; } }
.shell .shelf-tease { padding-block: 3rem 1rem; text-align: center; }
.shell .shelf-tease h2 { font-family: var(--hand); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0 0 .3rem; }
.shell .shelf-tease p { color: var(--chalk-dim); margin: 0 0 1.2rem; }
.shell.askpage .chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; margin: .2rem 0 .5rem; }
.shell.askpage .chips[hidden] { display: none; }
.shell.askpage .chips button {
font-family: var(--sys); font-size: .95rem; color: var(--chalk); background: #1b1916; border: 1px solid #3a3631;
border-radius: 999px; padding: .42rem .9rem; cursor: pointer; transition: background .2s, border-color .2s;
}
.shell.askpage .chips button:hover { background: #24211d; border-color: #5a544b; }
.shell.askpage .chips button:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.shell .grin-door { display: inline-block; line-height: 0; border: 0; }
.shell .grin-door:hover .tiny-smile, .shell .grin-door:focus-visible .tiny-smile { opacity: .55; }
.shell .nb-link { display: inline-block; margin-top: .4rem; font-family: var(--hand); font-size: 1.4rem; color: var(--chalk-faint); text-decoration: none; }
.shell .nb-link:hover, .shell .nb-link:focus-visible { color: var(--blood); }
.face.blink .upper, .face.blink .eye { opacity: 0 !important; transition: opacity .05s !important; }
.pane-head .add-name { font: inherit; font-size: .85rem; color: #6fa3ff; background: none; border: 0; padding: 0; cursor: pointer; }
.pane-head .add-name:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
.pane-head .add-name-in { font: inherit; font-size: .9rem; color: var(--chalk); background: #1b1916; border: 1px solid #3a3631; border-radius: 6px; padding: .1rem .4rem; width: 9rem; }
.countdown-home { font-family: var(--hand); color: var(--blood); font-size: 1.6rem; margin: -.4rem 0 1rem; }
.countdown { font-size: .95em; }
.watch-dlg { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(60rem, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: #000; color: var(--chalk); box-shadow: 0 30px 80px rgba(0,0,0,.8); overflow: visible; }
.watch-dlg::backdrop { background: rgba(5,4,3,.88); }
.watch-dlg .screen { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.watch-dlg .screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.watch-dlg .placeholder { font-family: var(--hand); font-size: clamp(2rem, 6vw, 3.4rem); color: var(--chalk-dim); }
.watch-x { position: absolute; top: -2.6rem; right: 0; font-size: 2rem; line-height: 1; color: var(--chalk); background: none; border: 0; cursor: pointer; padding: .2rem .4rem; }
.watch-x:focus-visible { outline: 2px solid var(--chalk); }
.lair .face { animation: him-arrive 5s cubic-bezier(.4,0,.2,1) .4s both; }
@keyframes him-arrive { from { opacity: 0; } 40% { opacity: .15; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lair .face { animation-duration: 1.2s; } }
body.home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.home > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.home .lair { flex: 1 0 auto; min-height: 0; align-items: center; }
body.home .lair .say { padding-block: 0 6vh; }
body.home > footer { flex: 0 0 auto; }
body.home > footer .wrap { padding-block: 1.1rem 1.4rem; }
@media (max-width: 600px) {
body.home .lair { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding-top: 4rem; }
body.home .lair .say { padding-block: 0 2rem; }
}
.row { position: relative; }
.row .row-dot { top: 50%; right: .6rem; transform: translateY(-50%); }
.shell .log .photo-msg, .shell.askpage .log .photo-msg { padding: 0; border: 0; background: none; box-shadow: none; font-style: normal; max-width: 260px; }