@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Pixel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/GeistPixel-Square.woff2") format("woff2");
}
/* A single full-bleed canvas. Only its background moves. */
html.review-sky-document { --paper:#0d1428; --ground:#070b17; --ink:#f0edff; --muted:#939bb5; --rule:#ffffff16; --gold:#b6bbe2; --body:"Geist Mono",monospace; --display:"Geist Pixel","Geist Mono",monospace; font-family:var(--body); color:var(--ink); background:var(--ground); font-synthesis:none; -webkit-font-smoothing:antialiased; }
html.review-sky-document body.review-sky-page { background:var(--ground); color:var(--ink); margin:0; }
* { box-sizing:border-box; } body { margin:0; } button,textarea { font:inherit; color:inherit; } button { border:0; background:none; cursor:pointer; touch-action:manipulation; } button,a { -webkit-tap-highlight-color:transparent; } button:disabled { opacity:.28; cursor:default; } button:focus-visible,a:focus-visible,textarea:focus-visible { outline:2px solid #b5cc6a; outline-offset:3px; } a { color:inherit; } h1,h2,h3,p { margin:0; } svg { display:block; width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } [hidden] { display:none!important; } .icon-library { position:absolute; width:0; height:0; overflow:hidden; } .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.workspace { display:grid; grid-template-columns:280px 420px; align-items:center; justify-content:center; gap:100px; min-height:100dvh; padding:24px; }
.wordmark { display:block; font:21px var(--display); letter-spacing:1.5px; text-decoration:none; margin-bottom:45px; } .wordmark span { display:block; font:8px var(--body); letter-spacing:3px; margin-top:9px; color:var(--muted); }
.concept-label,.example-label { font-size:8px; letter-spacing:1.5px; color:var(--muted); margin-bottom:16px; } .preview-sidebar h1 { font:36px/1.2 var(--display); letter-spacing:-1px; } .sidebar-lead { font-size:12px; line-height:1.8; color:var(--muted); margin:18px 0 28px; } .examples { border-top:1px solid var(--rule); } .scenario { display:flex; align-items:center; width:100%; min-height:43px; gap:15px; padding:8px 0; border-bottom:1px solid var(--rule); text-align:left; } .scenario span { font-size:9px; color:var(--muted); } .scenario strong { flex:1; font-size:11px; font-weight:450; } .scenario svg { width:15px; height:15px; } .scenario:hover { color:#678036; } .motif-family { display:flex; justify-content:space-between; margin-top:20px; } .motif-swatch { text-align:center; color:#6e806d; font-size:8px; } .motif-swatch svg { width:39px; height:39px; margin-bottom:4px; } .interaction-note { display:flex; gap:12px; margin-top:24px; } .interaction-note p { font-size:10px; line-height:1.7; color:var(--muted); } .interaction-note svg { width:17px; } .prototype-note { font-size:8px; line-height:1.8; color:var(--muted); margin-top:18px; }
.viewer-wrap { width:420px; } .review-app { height:min(890px,calc(100dvh - 48px)); min-height:590px; display:flex; flex-direction:column; padding:0 10px; background:var(--paper); border:1px solid #ffffff12; border-radius:25px; overflow:hidden; box-shadow:0 25px 70px #142e2414; }
.app-header { display:flex; justify-content:space-between; align-items:center; padding:18px 10px 14px; flex:none; } .brand-caption { display:block; font-size:7px; letter-spacing:1.5px; color:var(--muted); margin-bottom:5px; } .app-header h2 { font:24px/1 var(--display); letter-spacing:-.7px; } .app-header h2 span { color:#7f954f; } .preview-badge { font-size:7px; letter-spacing:.8px; padding:12px 0 12px 8px; color:var(--muted); }
.product-filters { display:flex; gap:15px; overflow-x:auto; padding:0 10px 13px; scrollbar-width:none; flex:none; } .product-filters::-webkit-scrollbar { display:none; } .product-filter { flex:0 0 53px; width:53px; padding:0; text-align:center; } .filter-ring { display:grid; place-items:center; width:49px; height:49px; padding:3px; border:1px solid #7880b13a; border-radius:50%; margin:0 auto 6px; } .filter-ring img,.all-icon { width:41px; height:41px; object-fit:cover; border-radius:50%; } .all-icon { display:grid; place-items:center; background:#222d48; } .all-icon svg { width:18px; height:18px; } .product-filter[aria-pressed=true] .filter-ring { border-color:#c2c8ff; box-shadow:0 0 12px #8297ff28; } .product-filter[aria-pressed=true] .all-icon { background:#273251; color:#ecedff; } .filter-label { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:8px; color:var(--muted); } .product-filter[aria-pressed=true] .filter-label { color:var(--ink); }
.story { --base:#102c2d; --bloom:#54763c; --glow:#456f6c; position:relative; flex:1; min-height:0; color:#fffdf3; border-radius:15px; overflow:hidden; isolation:isolate; container-type:size; background:var(--base); }
/* The galaxy is painted once per review/resize. Only lightweight layers animate. */
.story-background,.media,.media-shade { position:absolute; inset:0; pointer-events:none; }
.story-background { overflow:hidden; background:#070d21; }
.gradient-field { position:absolute; inset:-15%; background:radial-gradient(ellipse at 75% 24%,#78426466,transparent 40%),radial-gradient(ellipse at 16% 64%,#233f7750,transparent 50%); animation:nebula-breathe 18s ease-in-out infinite alternate; will-change:opacity,transform; }
.gradient-field::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 73% 24%,#35776d70,transparent 43%); animation:aurora-shift 18s ease-in-out infinite alternate; }
#sky-canvas,#sky-dust,.sky-twinkles { position:absolute; inset:0; width:100%; height:100%; }
.gradient-shade { position:absolute; inset:0; background:linear-gradient(180deg,#070d2100 20%,#070d2120 33%,#070d21a8 53%,#070d2160 83%,#070d2180); }
.sky-twinkles i { position:absolute; width:2px; height:2px; border-radius:50%; background:#e4edff; box-shadow:0 0 5px #a5c2ff; animation:twinkle 6s ease-in-out infinite alternate; }
@keyframes nebula-breathe { from { opacity:.65; transform:translate(-2%,-1%); } to { opacity:1; transform:translate(2%,2%); } }
@keyframes aurora-shift { from { opacity:0; } to { opacity:1; } }
@keyframes twinkle { from { opacity:.15; } to { opacity:.85; } }
.motion-paused .gradient-field,.motion-paused .gradient-field::after,.motion-paused .sky-twinkles i,.motion-paused #sky-canvas,.motion-paused #sky-dust,.motion-paused .star-drift,.motion-paused .star-light,.motion-paused .meteor,.motion-paused .meteor::after,.motion-paused .star-label,.motion-paused .star-hint { animation-play-state:paused; }
.sky-caption { display:flex; flex-direction:column; gap:8px; font-size:6px; letter-spacing:1.6px; color:#cad3efb3; }
#sky-id { font-size:7px; letter-spacing:1.2px; color:#ffffff59; }
.star-note { padding-top:24px; font-size:11px; line-height:1.8; color:#bfc8e4; }
.dedicated-star { position:absolute; z-index:3; top:14%; left:var(--star-left,70%); transform:translateX(-50%); width:142px; min-height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px; color:#edf0ff; border-radius:50%; }
.star-light { position:relative; display:block; width:52px; height:52px; flex:none; background:radial-gradient(circle,#fff 0 2%,#fff4d8 3%,#c6dcffb0 5%,#9bc4ff26 22%,transparent 65%); animation:beacon-breathe 5s ease-in-out infinite alternate; }
.star-light::before,.star-light::after { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:linear-gradient(transparent,#dfeeff 43%,white 50%,#dfeeff 57%,transparent); border-radius:50%; }
.star-light::before { width:1px; height:45px; box-shadow:0 0 10px #c4dcff70; }
.star-light::after { width:36px; height:1px; background:linear-gradient(90deg,transparent,#dfeeff 43%,white 50%,#dfeeff 57%,transparent); }
@keyframes beacon-breathe { from { opacity:.7; transform:scale(.94); } to { opacity:1; transform:scale(1.07); } }
.star-label { font-size:10px; line-height:1.4; margin-top:3px; max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.star-hint { font-size:5px; letter-spacing:1.3px; color:#c4d2f5a6; margin-top:7px; }
/* Galaxies and dust are cached paintings moving on separate composited layers. */
#sky-canvas { transform-origin:65% 25%; animation:galaxy-flow 34s ease-in-out infinite alternate; will-change:transform; }
#sky-dust { animation:dust-flow 19s ease-in-out infinite alternate; will-change:transform; }
@keyframes galaxy-flow { from { transform:translate(-7px,3px) rotate(-2deg) scale(1.03); } to { transform:translate(10px,-6px) rotate(2deg) scale(1.07); } }
@keyframes dust-flow { from { transform:translate(11px,-6px); } to { transform:translate(-15px,10px); } }
.star-drift { display:flex; flex-direction:column; align-items:center; width:100%; animation:star-drift var(--drift-time,9s) ease-in-out 1.6s infinite alternate; }
.star-orbit { display:block; position:relative; width:52px; height:52px; flex:none; }
.star-orbit .star-light { width:100%; height:100%; animation:star-formation 1.6s ease-out both,beacon-breathe 5s ease-in-out 1.6s infinite alternate; }
.star-drift .star-label,.star-drift .star-hint { animation:star-name 1.8s ease-out both; }
.meteor { pointer-events:none; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; border-radius:50%; background:#fff; box-shadow:0 0 6px 2px #d3e7ff,0 0 18px 4px #8baaff80; opacity:0; animation:meteor-arrival var(--arrival-time,1.3s) cubic-bezier(.12,.45,.28,1) both; }
.meteor::after { content:""; position:absolute; top:1px; left:1px; width:110px; height:2px; transform-origin:0 50%; transform:rotate(var(--tail-angle)); background:linear-gradient(90deg,#e9f2ffc9,#9fbbff44 35%,transparent); border-radius:50%; animation:meteor-tail var(--arrival-time,1.3s) ease-out both; }
@keyframes meteor-arrival { 0% { opacity:0; transform:translate(var(--arrival-x),var(--arrival-y)); } 8% { opacity:1; } 78% { opacity:1; } 100% { opacity:0; transform:translate(0,0); } }
@keyframes meteor-tail { 0%,40% { scale:1; } 100% { scale:0 1; } }
@keyframes star-formation { 0%,45% { opacity:0; transform:scale(.2); } 73% { opacity:1; transform:scale(1.45); } 100% { opacity:1; transform:scale(1); } }
@keyframes star-name { 0%,65% { opacity:0; transform:translateY(5px); } 100% { opacity:1; transform:translateY(0); } }
@keyframes star-drift { 0% { transform:translate(0,0); } 48% { transform:translate(var(--drift-x,7px),-5px); } 100% { transform:translate(-3px,5px); } }
.dedicated-star:hover .star-label { text-decoration:underline; text-underline-offset:4px; }
.media { display:grid; place-items:center; } .media img,.media video { width:100%; height:100%; min-height:0; object-fit:contain; background:#080d1c; } .media-shade { display:none; background:linear-gradient(#0009,transparent 28%,#0002 42%,#000c 72%,#000e); } .has-media .media-shade { display:block; } .has-media .story-background { display:none; }
.tap-zones { position:absolute; inset:0; z-index:1; display:flex; } .tap-zones button { width:50%; height:100%; padding:0; } .tap-zones button:focus-visible { outline-offset:-5px; }
.progress { position:absolute; z-index:3; left:15px; right:15px; top:7px; display:flex; gap:4px; height:12px; } .progress button { flex:1; padding:4px 0; } .progress span { display:block; height:2px; background:#ffffff40; border-radius:2px; } .progress .is-current span,.progress .is-past span { background:#ffffffe0; }
.review-header { position:absolute; z-index:2; top:27px; left:20px; right:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; pointer-events:none; } .author-line { display:flex; align-items:center; gap:9px; min-width:0; } .avatar { display:grid; place-items:center; width:31px; height:31px; flex:none; border:1px solid #ffffff4a; border-radius:50%; font-size:10px; background:#ffffff0c; } .author-line strong { display:block; font-size:11px; font-weight:500; max-width:235px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #date { display:block; font-size:7px; color:#ffffffac; margin-top:5px; } .motion-toggle { width:40px; height:40px; display:grid; place-items:center; pointer-events:auto; } .motion-toggle svg { width:16px; height:16px; } 
.review-copy { position:absolute; z-index:2; left:27px; right:65px; top:34%; bottom:116px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; pointer-events:none; }
.copy-label { display:flex; align-items:center; gap:14px; font-size:7px; letter-spacing:1.5px; color:#ffffffb8; margin-bottom:17px; } .rating { display:flex; gap:3px; align-items:center; letter-spacing:0; font-size:10px; } .rating .rating-star { font-size:11px; color:#e3decc; letter-spacing:3px; } .rating .rating-star.is-empty { opacity:.28; } .rating strong { font-weight:500; } .rating .rating-value { margin-left:9px; font-size:9px; letter-spacing:.5px; color:#f0edff; white-space:nowrap; } .rating small { font-size:7px; opacity:.7; }
#review-text { font-size:19px; line-height:1.55; letter-spacing:-.6px; font-weight:430; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden; overflow-wrap:anywhere; text-wrap:pretty; flex-shrink:0; }
.has-short-review #review-text { font:clamp(30px,9cqw,40px)/1.15 var(--display); letter-spacing:-1px; -webkit-line-clamp:6; } .has-long-review #review-text { font-size:16px; line-height:1.65; -webkit-line-clamp:8; } 
.read-review { display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:12px 0 0; font-size:8px; color:#ffffffe0; pointer-events:auto; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#ffffff55; flex:none; } .read-review svg { width:13px; height:13px; }
.has-media .review-copy { top:auto; bottom:112px; left:22px; }  .has-media .copy-label { margin-bottom:9px; } .has-media #review-text { font:12px/1.65 var(--body); letter-spacing:-.2px; -webkit-line-clamp:3; } .has-media .read-review { min-height:32px; padding-top:7px; }
.reactions { position:absolute; z-index:3; right:9px; bottom:152px; display:flex; flex-direction:column; gap:17px; } .reactions button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:44px; min-height:44px; padding:3px; font-size:9px; border-radius:10px; } .reactions svg { width:22px; height:22px; } .reactions button[aria-pressed=true] { color:#e9f9b2; } #like[aria-pressed=true] svg { fill:#e9f9b2; } .reactions button:hover { background:#ffffff10; }
.media-meta { position:absolute; z-index:2; bottom:91px; left:22px; right:22px; display:flex; justify-content:space-between; font-size:6px; letter-spacing:1.2px; text-transform:uppercase; color:#ffffff99; pointer-events:none; }
.product-cta { position:absolute; z-index:3; bottom:15px; left:15px; right:15px; width:calc(100% - 30px); min-height:60px; padding:8px 13px 8px 8px; display:flex; align-items:center; gap:11px; background:#dce2f00c; color:#e8edfc; border:1px solid #dce2f01f; border-radius:9px; text-align:left; } /* A faint travelling highlight, confined to the product button's one-pixel edge. */
@property --edge-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
.product-cta::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--edge-angle),transparent 0deg 270deg,#a9bdff18 302deg,#d9e6ff8c 338deg,#edf4ffb0 348deg,transparent 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:edge-orbit 11s linear infinite; opacity:.65; }
@keyframes edge-orbit { to { --edge-angle:360deg; } }
.motion-paused .product-cta::before { animation-play-state:paused; }
.product-cta img { width:43px; height:43px; object-fit:cover; border-radius:5px; flex:none; } .product-cta > span { flex:1; min-width:0; } .product-cta small { display:block; font-size:6px; letter-spacing:.8px; margin-bottom:5px; color:#a7b2cc; } .product-cta strong { display:block; font-size:10px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .product-cta svg { width:17px; height:17px; }
.video-controls { position:absolute; z-index:3; top:85px; left:20px; display:flex; gap:10px; } .video-controls button { width:42px; height:42px; display:grid; place-items:center; background:#0007; border:1px solid #ffffff40; border-radius:50%; } .video-controls svg { width:18px; height:18px; } .media-error { position:absolute; z-index:4; top:85px; left:20px; right:20px; padding:20px; background:#263b35; font-size:11px; } .media-error button { text-decoration:underline; margin-top:10px; min-height:44px; }
.story-navigation { height:40px; display:flex; justify-content:space-between; align-items:center; padding:0 9px; flex:none; gap:12px; } .story-navigation > div:first-child { display:flex; gap:8px; font-size:7px; color:var(--muted); min-width:0; } #story-number { color:var(--ink); white-space:nowrap; } #sequence-label { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:105px; } .nav-actions { display:flex; gap:8px; } .nav-actions button { display:flex; align-items:center; justify-content:center; gap:5px; min-width:32px; min-height:36px; font-size:9px; padding:0; } .nav-actions svg { width:13px; height:13px; } #desktop-prev svg { transform:rotate(180deg); }
.end-card { position:absolute; z-index:5; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:25px; text-align:center; background:#101a32; } .end-symbol { font:50px var(--display); color:#d7e4a7; margin-bottom:24px; } .end-card h3 { font:29px/1.2 var(--display); } .end-card p { font-size:12px; line-height:1.8; margin:20px 0; } .end-card button { display:flex; align-items:center; gap:10px; min-height:44px; font-size:11px; text-decoration:underline; } #back-from-end { opacity:.6; font-size:9px; }
/* The same reading and action style continues into every sheet. */
.sheet { border: 1px solid var(--rule); padding: 13px 23px 24px; border-radius: 16px; color: var(--ink); background: var(--paper); width: min(430px, calc(100vw - 28px)); max-height: 82dvh; overflow-y: auto; box-shadow: 0 20px 70px #12293626; }
.sheet::backdrop { background: #10212f70; }
.sheet-handle { width: 30px; height: 3px; background: #c9d0ca; border-radius: 3px; margin: 0 auto 19px; }
.sheet > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.sheet h2 { font: 23px/1.2 var(--display); letter-spacing: -.5px; }
.sheet header button { display: grid; place-items: center; width: 38px; height: 38px; flex: none; }
.sheet header svg { width: 20px; height: 20px; }
.sheet-body > p { font-size: 13px; line-height: 1.85; margin-bottom: 17px; overflow-wrap: anywhere; }
.sheet-body .sheet-note { font-size: 10px; color: var(--muted); line-height: 1.8; }
.sheet-stars { color: var(--gold); font-size: 16px; letter-spacing: 3px; margin-bottom: 15px; }
.sheet-byline { font-size: 10px; color: var(--muted); line-height: 1.7; margin-bottom: 15px; }
.product-preview-image { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 8px; margin-bottom: 20px; }
.sheet-body h3 { font-size: 15px; line-height: 1.6; font-weight: 500; margin-bottom: 12px; }
.sheet-link, .send-comment { display: flex; align-items: center; justify-content: center; width: 100%; gap: 15px; background: var(--ink); color: white; min-height: 46px; padding: 12px; border-radius: 6px; font-size: 11px; text-decoration: none; }
.comment-list { display: grid; gap: 12px; margin-bottom: 20px; }
.comment-item { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.comment-item strong { font-size: 10px; font-weight: 500; }
.comment-item p { font-size: 12px; line-height: 1.8; margin-top: 6px; overflow-wrap: anywhere; }
.comment-empty { text-align: center; padding: 24px 15px; background: #eeefe7; border-radius: 8px; }
.comment-empty svg { margin: 0 auto 13px; color: var(--muted); }
.comment-empty strong { font: 18px var(--display); display: block; margin-bottom: 8px; }
.comment-empty p { font-size: 10px; color: var(--muted); line-height: 1.7; }
.comment-form label { display: block; font-size: 10px; margin-bottom: 9px; }
.comment-form textarea { display: block; width: 100%; min-height: 88px; border: 1px solid #cbd3ce; border-radius: 6px; padding: 12px; font-size: 12px; line-height: 1.7; background: transparent; margin-bottom: 10px; resize: vertical; }
.about-list { font-size: 12px; line-height: 1.8; color: var(--muted); padding-left: 20px; }
.preview-examples { display: grid; margin-bottom: 20px; border-top: 1px solid var(--rule); }
.preview-examples button { display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-size: 12px; border-bottom: 1px solid var(--rule); padding: 10px 0; }
.preview-examples svg { width: 16px; height: 16px; }
.toast { position: fixed; z-index: 20; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 16px; background: var(--ink); color: white; border-radius: 7px; max-width: calc(100% - 32px); font-size: 11px; line-height: 1.6; text-align: center; box-shadow: 0 4px 15px #0002; }



.review-signature { margin-top:20px; font-size:11px; line-height:1.6; color:#cbd4ef; flex:none; }
.has-media .review-signature { font-size:9px; margin-top:8px; }
.has-media .dedicated-star { top:10%; left:var(--star-left,70%); background:radial-gradient(ellipse,#070d2190,transparent 72%); }
.has-media .review-copy { top:auto; }
.sheet.dedication-sheet { background:radial-gradient(ellipse at 65% 28%,#31457060,transparent 55%),#0a1127; border-color:#c6d4ff26; }
.dedication-sheet #sheet-title { font:8px var(--body); letter-spacing:2px; color:#cbd4ef; }
.dedication { text-align:center; padding:3px 3px 18px; }
.dedication-sky { position:relative; height:170px; display:grid; place-items:center; background:radial-gradient(ellipse,#6774a233,transparent 64%); }
.dedication-sky::before { content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 14% 26%,#ffffff90 0 1px,transparent 1.5px),radial-gradient(circle at 86% 60%,#ffffffa0 0 1px,transparent 1.5px),radial-gradient(circle at 72% 14%,#ffffff90 0 1px,transparent 1.5px),radial-gradient(circle at 27% 78%,#ffffff70 0 1px,transparent 1.5px); }
.dedication-sky .star-light { transform:scale(2); animation:none; }
.dedication h3 { font:33px/1.2 var(--display); letter-spacing:-.8px; margin:0 0 20px; }
.dedication p { font:12px/1.9 var(--body); color:#bac5df; margin-bottom:17px; }
.dedication strong { color:#f0efff; font-weight:500; }
.dedication .dedication-id { font-size:8px; letter-spacing:2px; color:#919fc0; margin-bottom:20px; }
.dedication .dedication-note { font-size:8px; line-height:1.7; color:#8592b1; margin-top:23px; }
.dedication-close { min-height:44px; padding:12px 24px; border:1px solid #cad3ef40; border-radius:30px; font-size:10px; }
@container (max-height:540px) { .review-copy { top:31%; bottom:107px; } #review-text { font-size:15px; -webkit-line-clamp:5; } .has-short-review #review-text { font-size:29px; -webkit-line-clamp:4; } .has-long-review #review-text { font-size:13px; -webkit-line-clamp:5; } .copy-label { margin-bottom:12px; } .dedicated-star { top:10%; min-height:100px; } .review-signature { margin-top:13px; } }
@container (max-height:460px) { .review-copy { top:33%; bottom:99px; left:21px; right:62px; } #review-text { font-size:13px; -webkit-line-clamp:3; } .has-short-review #review-text { font-size:25px; -webkit-line-clamp:3; } .has-long-review #review-text { font-size:12px; -webkit-line-clamp:3; } .copy-label { margin-bottom:9px; } .reactions { bottom:124px; gap:9px; } .has-media #review-text { font-size:11px; -webkit-line-clamp:2; } .dedicated-star { top:9%; min-height:90px; } .star-orbit { width:39px; height:39px; } .star-label { font-size:9px; } .review-signature { margin-top:10px; font-size:9px; } .sky-caption { font-size:5px; max-width:110px; line-height:1.5; } .star-hint { display:none; } }
@media (min-width:761px) and (max-width:980px) { .workspace { grid-template-columns:240px 390px; gap:45px; } .viewer-wrap { width:390px; } }
@media (max-width:760px) { body { overflow:hidden; } .workspace { display:block; padding:0; min-height:0; height:100dvh; } .preview-sidebar { display:none; } .viewer-wrap { width:100%; height:100%; max-width:480px; margin:auto; } .review-app { height:100%; min-height:0; border:0; border-radius:0; padding:0 8px; box-shadow:none; } .app-header { padding-top:calc(14px + env(safe-area-inset-top)); } .story-navigation { height:calc(40px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); } .sheet { margin:auto 0 0; width:100%; max-width:none; max-height:85dvh; border-radius:18px 18px 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom)); } }
@media (max-width:760px) and (max-height:680px) { .app-header { padding-top:10px; padding-bottom:10px; } .app-header h2 { font-size:21px; } .brand-caption { font-size:6px; } .product-filters { padding-bottom:10px; } .filter-ring { width:42px; height:42px; margin-bottom:5px; } .filter-ring img,.all-icon { width:34px; height:34px; } .story-navigation { height:34px; } }
@media (max-width:350px) { .product-filters { gap:10px; } .author-line strong { max-width:180px; font-size:10px; } .review-header { left:16px; } .product-cta strong { font-size:9px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Enqueued only on the exact, opted-in preview page. */
.workspace { grid-template-columns:420px; gap:0; }
.app-header h1 { font:24px/1 var(--display); letter-spacing:-.7px; }
.app-header h1 span { color:#aeb4ff; }
.page-links { display:grid; grid-template-columns:1fr minmax(0,1.2fr) 1fr; align-items:stretch; gap:8px; padding:10px 4px max(10px,env(safe-area-inset-bottom)); flex:none; }
.page-links a,.page-links button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:46px; padding:10px 8px; border:1px solid #b0bfff55; border-radius:12px; font:600 15px/1.2 var(--body); text-align:center; text-decoration:none; }
.page-links svg { width:17px; height:17px; stroke-width:1.8; }
.page-links .shop-link { background:#eef0ff; border-color:#eef0ff; color:#12182c; }
.page-links .shop-link:hover { background:#fff; border-color:#fff; }
.page-links #close-feed { background:#ffffff08; color:#eef0ff; }
.page-links #close-feed:hover { background:#ffffff14; border-color:#b0bfff99; }
.page-links .write-review { display:block; align-content:center; padding:8px 3px; border-color:transparent; color:#cad3ef; font-size:10px; font-weight:400; line-height:1.5; }
.page-links .write-review:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.feed-status { display:flex; flex:1; min-height:200px; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:30px; text-align:center; font-size:12px; line-height:1.7; }
.feed-status button { border:1px solid #acb8d755; border-radius:20px; padding:10px 24px; }
.action-status { font-size:9px; color:var(--muted); padding:4px 10px; line-height:1.5; min-height:22px; }
.toast { background:#e9edff; color:#111a30; }
.comment-form textarea:disabled { opacity:.6; }
.sheet-body p { white-space:pre-wrap; overflow-wrap:anywhere; }
.sheet-link { display:block; margin-top:15px; }
#action-note { min-height:18px; }
.story-navigation { flex:none; }
@media (max-width:760px) { .page-links { padding-bottom:max(7px,env(safe-area-inset-bottom)); } .story-navigation { height:34px; padding-bottom:0; } .app-header h1 { font-size:22px; } }
@media (min-width:761px) and (max-width:980px) { .workspace { grid-template-columns:390px; } }

.arena-details { flex:none; font-size:8px; line-height:1.5; text-align:left; padding:7px 10px 0; color:#cad3ef; text-decoration:underline; text-underline-offset:3px; }
/* Short/landscape screens scroll rather than overlap the reading controls. */
@media (max-width:760px) and (max-height:680px) {
  body { overflow:auto; }
  .workspace { height:auto; min-height:680px; }
  .viewer-wrap { height:auto; }
  .review-app { height:100svh; min-height:680px; }
}