@import url('https://raufenc.com/lib/design-system/tokens.css');
:root{color-scheme:dark;--bar:64px;--tools:56px;--ink:#e8e8f0;--panel:#111118;--accent:#818cf8;font-family:Inter,system-ui,-apple-system,sans-serif;background:#0a0a0f;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}:focus-visible{outline:3px solid #a5b4fc;outline-offset:3px}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.skip:focus{position:fixed;z-index:100;top:0;background:#6366f1;padding:16px}.topbar{height:calc(var(--bar) + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));display:flex;align-items:center;gap:12px;border-bottom:1px solid #ffffff10;background:#0a0a0f;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:750;margin-right:auto}.brand small{display:block;font-size:12px;letter-spacing:2px;color:#a6a6c4;margin-top:4px;font-weight:550}.accent{color:var(--accent)}.plain-button{min-width:44px;min-height:44px;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-size:14px}.plain-button:hover{background:#ffffff0c}.toolbar{height:var(--tools);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 24px;border-bottom:1px solid #ffffff0c;background:#0a0a0f;position:relative;z-index:4}.formats{display:flex;align-items:center;height:44px;gap:4px}.formats button{background:transparent;border:0;border-radius:8px;padding:0 14px;height:40px;color:#9999b0;font-size:14px;font-weight:650}.formats button[aria-pressed=true]{color:#c7d2fe;background:#6366f124}.filter select{max-width:190px;color:#c3c3d9;background:#18181f;border:1px solid #ffffff12;border-radius:8px;padding:9px 28px 9px 10px;min-height:40px;font-size:14px}.feed{height:calc(100vh - var(--bar) - var(--tools) - env(safe-area-inset-top));height:calc(100dvh - var(--bar) - var(--tools) - env(safe-area-inset-top));overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.feed::-webkit-scrollbar{display:none}.wallpaper{position:relative;height:100%;min-height:320px;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate;overflow:hidden;background:#101018}.art-backdrop{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(35px) brightness(.25);z-index:-2}.art-image{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.wallpaper::after{content:'';pointer-events:none;position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent 32%,transparent 85%,rgba(0,0,0,.12));z-index:0}.caption{position:absolute;left:max(24px,calc((100vw - 1100px)/2));bottom:calc(36px + env(safe-area-inset-bottom));right:110px;z-index:1;max-width:600px;text-shadow:0 2px 15px #0008}.caption .eyebrow{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#d0d0e0;margin:0 0 8px}.caption h1{font-size:clamp(24px,3vw,40px);line-height:1.15;margin:0 0 12px;font-weight:650;letter-spacing:-.6px}.trace{display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0;border:0;background:none;font-size:14px;font-weight:550;color:#e2e2ef}.trace svg{width:18px;height:18px}.actions{position:absolute;right:max(24px,calc((100vw - 1100px)/2));bottom:calc(90px + env(safe-area-inset-bottom));z-index:2;display:flex;flex-direction:column;gap:22px}.action{display:flex;align-items:center;flex-direction:column;gap:6px;background:none;border:0;padding:0;font-size:12px;font-weight:650;text-shadow:0 2px 5px #0008;min-width:54px}.action .disc{height:52px;width:52px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff30;background:#12121bb0;backdrop-filter:blur(16px)}.action:hover .disc{background:#6366f1bb}.action svg{width:25px;height:25px}.page-controls{position:fixed;right:22px;top:50%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px}.page-controls button{height:44px;width:44px;border-radius:50%;border:1px solid #ffffff25;background:#12121bcc;font-size:22px}.page-controls span{font-size:12px;font-variant-numeric:tabular-nums;text-shadow:0 2px 4px #000}.swipe-hint{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:2;padding:8px 14px;border-radius:30px;background:#09090f77;font-size:12px;pointer-events:none;white-space:nowrap;animation:hint-away .4s 5s forwards}.loading,.no-js{padding:24px}.image-error{position:absolute;left:20px;right:20px;top:40%;text-align:center;background:#111118e6;padding:20px;border-radius:12px;z-index:3}.image-error button{display:block;margin:12px auto 0;padding:10px 16px;border:0;border-radius:8px;background:#6366f1}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(90vw,460px);padding:13px 20px;border-radius:12px;background:#e8e8f0;color:#171726;z-index:100;font-size:14px;box-shadow:0 8px 40px #0006;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}dialog{color:#e8e8f0;background:#111118;border:1px solid #ffffff15;border-radius:22px;padding:0;width:min(540px,calc(100% - 32px));max-height:85dvh;box-shadow:0 24px 120px #0008}dialog::backdrop{background:#030309ad;backdrop-filter:blur(8px)}.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;padding:18px 24px;background:#111118;z-index:2;border-bottom:1px solid #ffffff10}.sheet-head h2{font-size:20px;line-height:1.3;margin:0}.sheet-head button{font-size:20px}.sheet-body{padding:24px;font-size:16px;line-height:1.7}.sheet-body p{margin:0 0 18px}.sheet-body .source{font-size:14px;color:#a4a4be}.sheet-link{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:12px 16px;margin-top:10px;border:1px solid #ffffff18;border-radius:12px;background:#1a1a26;width:100%;font-size:15px;text-align:left;gap:14px}.sheet-link.primary{background:#6366f1;border-color:#818cf8;color:white}.sheet-link small{font-size:12px;color:#c5c5da}.sheet-link:disabled{opacity:.65}.share-note{font-size:14px;color:#aaaac0;margin-top:16px!important}.copy-field{width:100%;font:inherit;font-size:14px;padding:12px;background:#08080f;color:#c7d2fe;border:1px solid #6366f177;border-radius:8px}.thumbnail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}.thumb{padding:0;border:0;background:transparent;min-width:0;text-align:left}.thumb img{display:block;width:100%;aspect-ratio:9/19.5;object-fit:contain;background:#08080e;border-radius:8px}.thumb span{display:block;font-size:12px;margin-top:7px;color:#c3c3d5;line-height:1.4}.thumb[aria-current=true] img{outline:2px solid #818cf8;outline-offset:3px}.menu-links{padding:12px 20px 24px}.menu-links a{display:block;padding:13px 12px;border-radius:8px;font-size:15px}.menu-links a[aria-current=page]{color:#a5b4fc;background:#6366f124}.menu-links a:hover{background:#ffffff0a}@keyframes hint-away{to{opacity:0}}
@media(min-width:1000px){.feed{margin:0 auto;max-width:1440px}.wallpaper[data-format=dikey] .art-image{max-width:660px;margin:auto}.caption{left:40px}.actions{right:90px}.wallpaper[data-format=dikey] .caption{max-width:290px}.wallpaper[data-format=dikey] .caption h1{font-size:32px}.page-controls{right:max(24px,calc((100vw - 1380px)/2))}}
@media(max-width:640px){:root{--bar:66px;--tools:52px}.topbar{padding-left:14px;padding-right:10px;gap:2px}.brand{gap:7px;font-size:16px}.brand small{font-size:12px;letter-spacing:1.7px}.brand>svg{width:20px}.toolbar{padding:4px 12px;gap:4px}.formats button{padding:0 10px;font-size:13px}.filter select{max-width:150px;font-size:13px;padding-left:8px}.caption{left:20px;bottom:calc(22px + env(safe-area-inset-bottom));right:85px}.caption h1{font-size:27px}.caption .eyebrow{font-size:12px;letter-spacing:1px}.actions{right:14px;bottom:calc(112px + env(safe-area-inset-bottom));gap:18px}.action .disc{width:48px;height:48px}.page-controls{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));right:18px;gap:2px}.page-controls button{width:44px;height:36px;font-size:20px;border:0;background:transparent}.page-controls span{font-size:12px}.swipe-hint{top:16px}.wallpaper::after{background:linear-gradient(0deg,#000c,transparent 37%,transparent)}dialog{margin:auto 0 0;width:100%;max-width:none;border-radius:22px 22px 0 0;max-height:85dvh;padding-bottom:env(safe-area-inset-bottom)}.sheet-head{padding:14px 20px}.sheet-body{padding:22px}.thumbnail-grid{gap:12px;padding:18px}.thumb span{font-size:12px}}
@media(max-height:500px) and (orientation:landscape){:root{--bar:50px;--tools:44px}.actions{bottom:16px;right:65px;flex-direction:row;gap:12px}.caption{bottom:16px;max-width:50%;}.caption h1{font-size:22px;margin-bottom:4px}.caption .eyebrow,.swipe-hint{display:none}.action .disc{width:40px;height:40px}.action{font-size:12px}.page-controls{top:45%;bottom:auto;right:12px}.wallpaper{min-height:200px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.swipe-hint{display:none}}

.collection-label{margin:0;color:#a6a6c4;font-size:14px;font-weight:550}.landscape-preview{display:block;width:100%;height:auto;max-height:55dvh;object-fit:contain;border-radius:10px;margin-bottom:20px}.landscape-option .disc{border-color:#a5b4fc88;background:#3a3d7dcc}.landscape-option span:last-child{max-width:70px;line-height:1.2}.actions{gap:16px}@media(max-width:640px){.actions{gap:12px}.action .disc{width:44px;height:44px}.collection-label{font-size:14px}}

/* Edge-to-edge reel: image owns the viewport; controls float above it. */
:root{--reel-width:min(100vw,600px)}
body::before{content:'';position:fixed;inset:-50px;background-image:var(--scene);background-position:center;background-size:cover;filter:blur(45px) brightness(.23);pointer-events:none;z-index:-1}
.feed{position:fixed;inset:0;width:var(--reel-width);max-width:none;height:100vh;height:100dvh;margin:0 auto;background:#08080e;box-shadow:0 0 100px #0005}
.wallpaper{height:100%;min-height:0}
.wallpaper[data-format=dikey] .art-image{max-width:none;margin:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;cursor:pointer}
.art-backdrop{display:none}
.wallpaper::after{background:linear-gradient(180deg,#0007 0,transparent 18%,transparent 58%,#000a 100%)}
.topbar{position:fixed;top:0;left:0;right:0;margin:auto;width:var(--reel-width);height:calc(80px + env(safe-area-inset-top));padding:calc(10px + env(safe-area-inset-top)) 18px 16px;border:0;background:linear-gradient(180deg,#0009,transparent);gap:4px;transition:opacity .18s}
.brand{font-size:17px;gap:7px;color:white;text-shadow:0 2px 14px #0008}.brand small{font-size:12px;letter-spacing:1px;color:#f2f2fa}.accent{color:#e0e7ff}
.topbar .plain-button{width:44px;height:44px;color:white;filter:drop-shadow(0 2px 7px #0008)}
#open-grid span{display:none}
.caption,.wallpaper[data-format=dikey] .caption{left:24px;right:100px;bottom:calc(24px + env(safe-area-inset-bottom));max-width:none;transition:opacity .18s}
.caption .eyebrow{font-size:12px;letter-spacing:.6px;margin-bottom:8px;color:#ececf4}
.caption h1,.wallpaper[data-format=dikey] .caption h1{font-size:clamp(25px,4vw,34px);font-weight:700;line-height:1.12;letter-spacing:-.7px;margin-bottom:8px;color:#fff}
.trace{color:#fff;font-size:14px;min-height:44px;text-shadow:0 2px 8px #000}
.actions{right:14px;bottom:calc(104px + env(safe-area-inset-bottom));gap:18px;transition:opacity .18s}
.action{min-width:60px;gap:3px;font-size:12px;color:white;text-shadow:0 2px 8px #000}
.action .disc,.landscape-option .disc{width:48px;height:48px;border:0;background:transparent;backdrop-filter:none;filter:drop-shadow(0 2px 6px #0009)}
.action svg{width:30px;height:30px;stroke-width:1.9}
.action:hover .disc{background:#ffffff20}
.landscape-option span:last-child{max-width:72px}
.page-controls{right:max(16px,calc((100vw - 600px)/2 - 68px));top:50%;bottom:auto;transform:translateY(-50%);gap:10px;transition:opacity .18s}
.page-controls button{width:44px;height:44px;border:1px solid #ffffff30;background:#0005}
.page-controls span{font-size:12px;color:white}
.swipe-hint{top:calc(88px + env(safe-area-inset-top));background:#0004;backdrop-filter:blur(8px)}
.feed::after{content:'';position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:var(--reel-width);height:2px;background:linear-gradient(90deg,#ffffffb0 var(--progress),#ffffff20 var(--progress));z-index:8;pointer-events:none}
.exit-clean{position:fixed;right:max(20px,calc((100vw - 600px)/2 + 20px));top:calc(18px + env(safe-area-inset-top));z-index:10;min-height:44px;padding:10px 14px;gap:14px;align-items:center;border:1px solid #ffffff40;border-radius:30px;background:#0006;color:white;font:inherit;font-size:14px;display:none;backdrop-filter:blur(15px)}
.immersive .topbar,.immersive .caption,.immersive .actions,.immersive .page-controls,.immersive .swipe-hint{visibility:hidden;opacity:0;pointer-events:none}
.immersive .wallpaper::after,.immersive .feed::after{display:none}
.immersive .exit-clean{display:flex}
@media(max-width:700px){:root{--reel-width:100vw}.topbar{padding-left:12px;padding-right:8px}.brand{font-size:16px}.brand small{font-size:12px;letter-spacing:.8px}.brand>svg{width:18px}.caption,.wallpaper[data-format=dikey] .caption{left:18px;right:92px;bottom:calc(22px + env(safe-area-inset-bottom))}.caption h1,.wallpaper[data-format=dikey] .caption h1{font-size:28px}.page-controls{right:22px;top:auto;bottom:calc(25px + env(safe-area-inset-bottom));transform:none}.page-controls button{display:none}.page-controls span{font-size:12px}.actions{right:8px;gap:14px;bottom:calc(100px + env(safe-area-inset-bottom))}.action .disc{width:46px;height:46px}.exit-clean{right:16px}}
@media(max-height:520px) and (orientation:landscape){:root{--reel-width:min(100vw,900px)}.topbar{height:68px}.caption,.wallpaper[data-format=dikey] .caption{bottom:12px;right:360px}.caption h1,.wallpaper[data-format=dikey] .caption h1{font-size:24px}.actions{flex-direction:row;right:54px;bottom:18px;gap:10px}.caption .eyebrow{display:none}.page-controls{right:10px}.swipe-hint{display:none}}