#blend-plate{display:none;position:absolute;inset:0;width:100%;height:100%}
#viewport.blended #blend-plate{display:block}
#viewport.blended #plate{visibility:hidden}
@media(min-width:801px){
 :root{--paper:#b9ae9b;--ink:#263d31;--muted:#334337;--line:#283d3026}
 :root[data-light=day]{--paper:#d8dad6}
 html,body{background:var(--paper);color:var(--ink);transition:background-color .35s ease}
 main{padding:0 clamp(24px,3.2vw,60px)}
 .intro{padding:28px 0 18px;gap:24px}
 .intro>.lead{max-width:260px;font-size:12px;line-height:1.65;color:var(--muted)}
 .intro .eyebrow{display:none}
 .intro h1{font-size:clamp(32px,3vw,48px);letter-spacing:-.035em}
 .intro h1 em{color:#40553f}
 .experience{border-color:var(--line)}
 .toolbar{padding:16px 0;min-height:74px;gap:16px}
 .format-label{font-size:12px;color:var(--muted);gap:14px}
 .format-label select{padding:12px 38px 12px 18px;background:#294236;color:#f3efe4;border-radius:18px}
 .switch{background:#31442e12;border-radius:18px;padding:3px}
 .switch button{border-radius:15px;padding:10px 17px;color:var(--muted)}
 .switch button[aria-pressed=true]{background:#f4f0e375;box-shadow:none;color:var(--ink)}
 .quiet{border-color:var(--line);border-radius:18px}
 .thought-toggle{color:var(--muted);font-size:12px}
 .composition{grid-template-columns:minmax(0,35%) minmax(0,65%);background:none;border-radius:0;gap:0;isolation:auto}
 .composition .story{margin:0;padding:0 clamp(22px,3vw,48px) 0 0;background:none;border-radius:0;box-shadow:none;overflow:visible;gap:0;align-self:center}
 .composition .story>img{border-radius:20px;aspect-ratio:1.4;max-height:36svh;box-shadow:none}
 .composition .story>div:not(.facts){padding:22px 2px 0}
 .composition .story h2{color:var(--ink);font-size:clamp(25px,2.25vw,36px);line-height:1.1;max-width:440px;margin:9px 0 12px}
 .composition .story p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.7;max-width:440px}
 .composition .story .eyebrow{color:#334337;font-size:10px;letter-spacing:.16em}
 .composition .frame{background:none;border-radius:0;overflow:visible}
 #viewport{mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent),linear-gradient(transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
 .composition .live-badge{top:4px;left:18px;background:none;border:0;padding:6px 0;color:#334337;font-size:8px;letter-spacing:.13em}
 .composition .live-badge i{width:5px;height:5px;background:#526f45;box-shadow:none}
 .zoom{right:8px;bottom:2px;background:#f0ede087;box-shadow:none;border:1px solid #2d44291c;border-radius:18px}
 .views{padding:18px 0 8px;gap:clamp(8px,1.25vw,23px);border-top:1px solid var(--line);margin-top:16px;flex-wrap:nowrap}
 .views button{font-size:11px;border:0;border-radius:0;padding:8px 0;background:none;color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent}
 .views button[aria-pressed=true]{background:none;color:var(--ink);border-color:#3b5236}
 .scroll-hint{color:#334337;font-size:9px;letter-spacing:.04em;margin:7px 0 13px}
 #loading{background:var(--paper);border-radius:0;color:var(--muted)}
 #legacy{border-radius:0;min-height:0!important}
 .experience.legacy-mode .composition{position:relative}
}
@media(min-width:801px) and (max-height:720px){
 .intro{padding:14px 0 12px}.intro h1{font-size:32px}.toolbar{min-height:60px;padding:9px 0}
 .composition .story>img{max-height:29svh}.composition .story>div:not(.facts){padding-top:14px}.composition .story h2{font-size:25px;margin:6px 0 8px}
 .composition .story p:not(.eyebrow){font-size:12px;line-height:1.55}.views{margin-top:8px;padding-top:10px}
}
@media(prefers-reduced-motion:reduce){html,body{transition:none}}

/* A bounded composition row keeps the model and controls in separate areas. */
@media(min-width:801px){
 .sticky{isolation:isolate}
 .toolbar{position:relative;z-index:3}
 .composition{grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}
 .composition .frame{height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;border-radius:18px;isolation:isolate;align-self:stretch}
 .composition .story{max-height:100%;min-height:0}
 .composition .story>img{min-height:0;flex-shrink:1}
 .composition .story>div:not(.facts){flex-shrink:0}
 .views{position:relative;z-index:3;flex:none;background:var(--paper);flex-wrap:wrap;row-gap:4px}
 .scroll-hint{position:relative;z-index:3;flex-shrink:0}
}