/* Pinned: a quiet, interactive companion to the Arrange walkthrough. */
.pinned-story { max-width:1440px; padding-top:70px; padding-bottom:100px; }
.pinned-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:48px; }
.pinned-heading .eyebrow { margin-bottom:24px; }
.pinned-heading h2 { font-size:clamp(36px,4.05vw,59px); }
.pinned-heading h2 em { font-style:normal; color:#638a9b; }
.pinned-heading>p { max-width:350px; color:#557080; font-size:16px; line-height:1.85; margin:0 0 4px; }
.pinned-cinema { border:1px solid #47728c25; border-radius:24px; background:#ffffff91; box-shadow:0 24px 80px #254b6510; overflow:hidden; }
.pin-cinema-toolbar { padding:28px 32px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.pin-narration { font-size:17px; line-height:1.5; color:#2f5367; margin:8px 0 0; min-height:26px; }
.pin-play { min-width:148px; }
.pin-landscape { padding:28px 5% 32px; background:linear-gradient(125deg,#bededbee,#e2eef1dc 48%,#bdd8e2ab),url('assets/alpine-wallpaper.jpg') center 65%/cover; }
.pin-board { position:relative; max-width:1000px; margin:auto; padding:18px 22px 13px; background:#f1f7f6c9; border:1px solid #ffffffe0; border-radius:19px; box-shadow:0 22px 55px #2c596029,inset 0 1px 1px #fff; backdrop-filter:blur(24px); color:#29434d; font-family:-apple-system,BlinkMacSystemFont,'DM Sans',sans-serif; }
.pin-board-toolbar { display:flex; align-items:center; gap:18px; margin-bottom:17px; }
.pin-brand { display:flex; align-items:center; gap:7px; font-size:15px; font-weight:650; letter-spacing:-.5px; }
.pin-toolbar-icons { display:flex; gap:7px; }
.pin-toolbar-icons>span { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#f6cb6b; color:#856217; font-size:13px; }
.pin-toolbar-icons>span:nth-child(2) { background:#8ccddd; color:#266277; font-size:11px; }
.pin-toolbar-icons>span:nth-child(3) { background:#9fceb3; color:#3e7960; font-size:11px; }
.pin-toolbar-description { margin-left:auto; font-size:11px; color:#5c747d; }
.pin-section-label,.pin-page-header { display:flex; align-items:center; gap:14px; margin:0 2px 11px; }
.pin-section-label h3,.pin-page-header h3 { font-size:12px; font-weight:600; letter-spacing:.1px; margin:0; color:#4d6872; }
.pin-section-label>span { margin-left:auto; font-size:10px; color:#607b83; }
.pin-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pin-card { min-width:0; border:1px solid #517c8425; border-radius:13px; padding:12px; background:#f9fcfb75; transition:box-shadow .4s,background .4s; }
.pin-card-heading { display:flex; align-items:center; gap:8px; margin-bottom:11px; height:24px; }
.pin-card h4 { font-size:12px; font-weight:600; margin:0; }
.pin-icon { display:grid; place-items:center; width:24px; height:24px; border-radius:7px; box-shadow:0 2px 3px #224c5915,inset 0 1px 1px #fff8; flex-shrink:0; }
.pin-icon svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.pin-icon-safari { background:linear-gradient(#76c9e9,#357bbb); color:white; }
.pin-icon-mail { background:linear-gradient(#70c1e9,#367bc6); color:white; }
.pin-icon-notes { background:linear-gradient(#efd58c,#d4b65a); color:white; }
.pin-icon-numbers { background:linear-gradient(#a2d9b1,#56a077); color:white; }
.pin-icon-photos { background:linear-gradient(135deg,#e9ba7e,#dd8989,#bfb0db); color:white; }
.pin-icon-music { background:linear-gradient(#d99faf,#b35f81); color:white; }
.pin-grip { margin-left:auto; color:#657d8780; font-size:17px; }
.pin-badge { color:white; background:#e46365; border:1px solid #ffffff90; padding:1px 5px; font-size:8px; border-radius:10px; }
.pin-preview-wrap { position:relative; height:112px; }
.pin-window { height:100%; overflow:hidden; background:white; border:1px solid #fff; border-radius:7px; box-shadow:0 3px 8px #2b4f6512; }
.pin-windowbar { height:15px; padding:0 6px; display:flex; align-items:center; gap:3px; background:#fbfcfd; border-bottom:1px solid #58748416; }
.pin-windowbar i { width:4px; height:4px; border-radius:50%; background:#c8d2d7; }
.pin-windowbar>span { width:40%; height:5px; margin:auto; border-radius:2px; background:#eef2f4; }
.pin-window-title { font-size:10px; color:#526a73; margin:9px 2px 0; line-height:1.3; height:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pin-fieldnotes { height:calc(100% - 15px); padding:10px 15px; color:white; background:linear-gradient(110deg,#163b5070,#48677608),url('assets/alpine-wallpaper.jpg') center 45%/cover; }
.pin-fieldnotes>span { display:flex; justify-content:space-between; font-size:5px; letter-spacing:1.3px; }
.pin-fieldnotes i { font-style:normal; font-size:4px; }
.pin-fieldnotes strong { display:block; font:400 26px/1 Georgia,serif; letter-spacing:-.6px; margin:10px 0 7px; }
.pin-fieldnotes small { font-size:6px; }
.pin-mail { height:calc(100% - 15px); display:grid; grid-template-columns:31% 1fr; }
.pin-mail aside { background:#edf3f7; padding:10px 7px; font-size:6px; color:#537285; }
.pin-mail aside>b,.pin-mail aside>span { display:block; margin-bottom:7px; }
.pin-mail aside>span { font-size:5px; }
.pin-mail aside>i { display:block; font-style:normal; padding:5px 3px; border-bottom:1px solid #bacdd440; font-size:5px; white-space:nowrap; }
.pin-mail aside>i:first-of-type { background:#d8e7f1; border-radius:3px; }
.pin-mail>div { padding:13px 15px; }
.pin-mail-from { display:flex; align-items:center; gap:7px; font-size:6px; color:#7190a2; }
.pin-mail-from b { font-weight:500; color:#547286; }
.pin-mail strong { display:block; font-size:11px; font-weight:600; margin:12px 0 7px; }
.pin-mail p { font-size:7px; line-height:1.7; margin:0; color:#70858b; }
.pin-lines { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.pin-lines i { height:2px; width:85%; background:#e4edf0; border-radius:2px; }
.pin-lines i:last-child { width:60%; }
.pin-pages { margin-top:17px; }
.pin-page-header { gap:18px; margin-bottom:11px; min-height:31px; }
.pin-page-header h3 { display:flex; align-items:center; gap:6px; }
.pin-page-header h3 svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-linejoin:round; stroke-width:1.6; }
.pin-tabs { display:flex; gap:3px; border-radius:9px; padding:3px; background:#49758109; }
.pin-tabs button { background:transparent; color:#58737e; border:1px solid transparent; padding:5px 13px; font-size:11px; border-radius:7px; transition:background .3s,color .3s,box-shadow .3s; }
.pin-tabs button[aria-pressed=true] { background:#ffffffe3; border-color:#fff; color:#2a4c60; box-shadow:0 2px 5px #4d758215; }
.pin-tabs button:disabled { cursor:default; }
.pin-page-hint { margin-left:auto; font-size:10px; color:#637e89; }
.pin-page-stage { position:relative; }
.pin-page .pin-preview-wrap { height:128px; }
.pin-note { height:calc(100% - 15px); background:#fffcf0; padding:13px 17px; color:#686048; }
.pin-note small { font-size:6px; letter-spacing:1.5px; color:#a1926f; }
.pin-note strong { display:block; font:400 21px/1.1 Georgia,serif; letter-spacing:-.3px; margin:8px 0 10px; }
.pin-note>span { display:block; font-size:6px; margin-top:5px; }
.pin-numbers { height:calc(100% - 15px); padding:14px 16px; display:grid; grid-template-columns:1.3fr 1fr; gap:24px; background:#fcfffc; color:#456b57; }
.pin-numbers small { font-size:6px; letter-spacing:1px; }
.pin-numbers strong { display:block; font-size:13px; font-weight:500; margin:10px 0 13px; }
.pin-numbers span { font-size:6px; display:flex; justify-content:space-between; border-bottom:1px solid #dfeae1; padding:5px 0; }
.pin-numbers b { font-weight:500; }
.pin-chart { display:flex; gap:7px; align-items:end; height:80%; align-self:center; border-bottom:1px solid #d7e9e0; }
.pin-chart i { flex:1; height:45%; background:#b2d1b9; border-radius:3px 3px 0 0; }
.pin-chart i:nth-child(2) { height:70%; }.pin-chart i:nth-child(3) { height:60%; }.pin-chart i:nth-child(4) { height:88%; background:#8db69c; }.pin-chart i:nth-child(5) { height:100%; background:#729e88; }
.pin-photos { height:calc(100% - 15px); padding:11px 14px; background:#fff; }
.pin-photos>span { font:15px Georgia,serif; color:#7a6a5a; }.pin-photos>small { font-size:6px; color:#8f887d; }
.pin-photos>div { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:5px; height:64%; margin:8px 0 5px; }
.pin-photos i { border-radius:3px; background:url('assets/alpine-wallpaper.jpg') 10% center/cover; }
.pin-photos i:nth-child(2) { background-position:50% 60%; }.pin-photos i:nth-child(3) { background-position:90% center; }
.pin-music { height:calc(100% - 15px); padding:14px; display:flex; align-items:center; gap:18px; background:#fcf9fb; }
.pin-album { position:relative; aspect-ratio:1; height:90%; overflow:hidden; border-radius:4px; box-shadow:0 5px 10px #5943661c; background:linear-gradient(155deg,#e5c9ad,#bb9bae 60%,#727c99); }
.pin-album:before,.pin-album:after,.pin-album i { content:''; position:absolute; inset:35% -20% -50%; border-radius:45%; border:1px solid #fff5; background:linear-gradient(#e7d7b499,#9d9fb300); transform:rotate(-30deg); }.pin-album:after { inset:52% -30% -65%; background:#b9b1c699; }.pin-album i { inset:15% -30% -40%; background:transparent; }
.pin-music small { font-size:5px; letter-spacing:.5px; color:#9d8691; }.pin-music strong { display:block; font:18px/1.1 Georgia,serif; color:#745968; margin:7px 0; }.pin-music span { font-size:6px; color:#9d8593; }.pin-music b { display:block; font-size:15px; color:#a27a8e; margin-top:7px; }
.pin-close { position:absolute; right:7px; top:6px; width:21px; height:21px; display:grid; place-items:center; border:1px solid #dd747366; border-radius:50%; background:#fff2eed9; color:#a95353; font-size:17px; line-height:1; padding:0; box-shadow:0 2px 6px #89684c15; }
.pin-close:hover { background:#e77471; color:white; }
.pin-reserved { height:100%; border:1px dashed #719ba76b; border-radius:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#eaf4f344; }
.pin-open { background:none; border:0; color:#477f92; padding:12px 25px; font-size:12px; border-radius:8px; }
.pin-open>span { display:block; font-size:24px; font-weight:300; margin-bottom:8px; }
.pin-open:hover { background:#d6e9ed60; }
.pin-reserved-label { font-size:9px; color:#708b95; }
.pin-board-footer { display:flex; justify-content:space-between; padding-top:12px; font-size:9px; color:#65818a; }
.pin-drag-cursor { position:absolute; left:0; top:0; z-index:6; pointer-events:none; opacity:0; }
.pin-drag-cursor svg { width:20px; height:25px; fill:#274758; stroke:#fff; stroke-width:1.5; filter:drop-shadow(0 2px 2px #284a5955); }
.pin-card.pin-lifted { position:relative; z-index:5; background:#f6fbfa; box-shadow:0 14px 34px #3158663d,0 0 0 1px #78a2ac; }
.pin-chapters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:23px 28px 5px; gap:13px; }
.pin-chapters>button { position:relative; display:grid; grid-template-columns:27px 1fr; gap:6px 9px; padding:13px 8px; background:transparent; border:0; border-top:2px solid #446c8018; text-align:left; color:#5c7888; transition:border-color .3s,background .3s; }
.pin-chapters>button:hover { background:#eef5f5; border-radius:0 0 7px 7px; }.pin-chapters>button[aria-pressed=true] { border-color:#668f99; color:#2b5262; }
.pin-chapters button>span { grid-row:1/3; font-size:10px; margin-top:2px; color:#618594; }
.pin-chapters strong { font-size:13px; font-weight:500; }.pin-chapters small { font-size:10px; line-height:1.5; font-weight:400; }
.pin-demo-caption { text-align:center; font-size:10px; line-height:1.7; color:#677f8d; padding:0 20px; margin:18px 0 24px; }
.pinned-details { display:grid; grid-template-columns:repeat(3,1fr); gap:50px; margin:46px 0 32px; }
.pinned-details article>span { font-size:10px; letter-spacing:1.4px; color:#698895; }.pinned-details h3 { font-size:20px; font-weight:500; letter-spacing:-.5px; margin:14px 0 12px; }.pinned-details p { font-size:15px; line-height:1.8; color:#587384; margin:0; }
.pin-optional { text-align:center; font-size:13px; line-height:1.9; color:#476a7b; padding:25px 15px 0; border-top:1px solid var(--line); }.pin-optional span { display:block; color:#6a828f; font-size:12px; }
.pinned-cinema [hidden] { display:none!important; }
@media(min-width:1450px) { .pin-preview-wrap { height:156px; }.pin-page .pin-preview-wrap { height:174px; }.pin-fieldnotes strong { margin-top:16px; font-size:31px; }.pin-note strong { font-size:25px; margin-top:12px; } }
@media(max-width:1000px) { .pinned-heading { display:block; }.pinned-heading>p { max-width:540px; margin-top:25px; }.pinned-heading>p br { display:none; }.pin-cinema-toolbar { padding:23px; }.pin-narration { font-size:15px; }.pin-landscape { padding:23px 4%; }.pin-page-hint { display:none; }.pin-mail>div { padding:12px; }.pinned-details { gap:28px; } }
@media(max-width:700px) { .pin-cinema-toolbar { align-items:start; flex-direction:column; gap:14px; }.pin-narration { min-height:45px; margin-bottom:0; }.pin-board { padding:14px; }.pin-card-grid { gap:10px; }.pin-card { padding:9px; }.pin-numbers { gap:10px; padding:12px; grid-template-columns:1fr; }.pin-chart { display:none; }.pin-mail { grid-template-columns:1fr; }.pin-mail aside { display:none; }.pin-chapters { gap:9px; padding:20px 20px 0; grid-template-columns:repeat(2,1fr); }.pin-chapters>button { padding:12px 4px; }.pinned-details { grid-template-columns:1fr; gap:25px; }.pin-optional { text-align:left; padding-left:0; padding-right:0; } }
@media(max-width:480px) { .pinned-story { padding:40px 5% 55px; }.pinned-heading { margin-bottom:29px; padding:0 5px; }.pinned-heading h2 { font-size:33px; letter-spacing:-1.5px; }.pinned-heading>p { font-size:15px; margin-top:20px; }.pinned-cinema { border-radius:17px; }.pin-cinema-toolbar { padding:20px 17px 18px; }.pin-cinema-toolbar .cinema-label { font-size:8px; letter-spacing:1.2px; }.pin-play { min-width:128px; }.pin-landscape { padding:18px 10px; }.pin-board { padding:12px 10px 10px; border-radius:13px; }.pin-board-toolbar { gap:10px; margin-bottom:18px; }.pin-toolbar-description { font-size:8px; }.pin-brand { font-size:13px; }.pin-brand img { width:17px; height:17px; }.pin-toolbar-icons { display:none; }.pin-section-label>span { font-size:8px; }.pin-section-label h3,.pin-page-header h3 { font-size:10px; }.pin-card-grid { gap:8px; }.pin-card { padding:7px; border-radius:9px; }.pin-card-heading { gap:5px; height:20px; margin-bottom:8px; }.pin-card h4 { font-size:10px; }.pin-icon { width:20px; height:20px; border-radius:5px; }.pin-icon svg { width:14px; height:14px; }.pin-grip { font-size:13px; }.pin-badge { font-size:7px; padding:1px 4px; }.pin-preview-wrap { height:114px; }.pin-page .pin-preview-wrap { height:133px; }.pin-windowbar { height:12px; }.pin-windowbar>span { display:none; }.pin-fieldnotes { height:calc(100% - 12px); padding:9px; }.pin-fieldnotes>span { font-size:4px; letter-spacing:.6px; }.pin-fieldnotes i { display:none; }.pin-fieldnotes strong { font-size:21px; margin:17px 0 8px; }.pin-fieldnotes small { font-size:5px; }.pin-mail>div { padding:10px; }.pin-mail strong { font-size:9px; line-height:1.3; margin:10px 0 6px; }.pin-mail p { font-size:6px; }.pin-lines { margin-top:8px; }.pin-window-title { font-size:8px; margin-top:7px; }.pin-page-header { gap:9px; }.pin-tabs button { padding:5px 9px; font-size:10px; }.pin-note { padding:12px 9px; }.pin-note strong { font-size:17px; margin:10px 0 12px; }.pin-note small { font-size:5px; letter-spacing:.8px; }.pin-note>span { font-size:5px; }.pin-close { width:21px; height:21px; top:5px; right:5px; }.pin-numbers { padding:12px 9px; }.pin-numbers strong { font-size:10px; margin:11px 0; }.pin-numbers small { font-size:5px; }.pin-numbers span { font-size:6px; padding:7px 0; }.pin-open { font-size:11px; padding:12px; }.pin-reserved-label { font-size:8px; }.pin-photos { padding:11px 9px; }.pin-photos>span { font-size:13px; }.pin-photos>div { gap:3px; }.pin-photos small { font-size:5px; }.pin-music { padding:10px 9px; gap:10px; align-items:start; }.pin-album { position:absolute; width:40px; height:40px; right:12px; bottom:27px; }.pin-music strong { font-size:17px; margin:10px 0 7px; }.pin-music small { font-size:4px; }.pin-music b { margin-top:9px; font-size:14px; }.pin-board-footer { font-size:8px; padding-top:12px; }.pin-chapters { padding:17px 17px 0; }.pin-chapters strong { font-size:12px; }.pin-chapters small { font-size:9px; }.pin-demo-caption { font-size:9px; margin:15px 0 20px; }.pinned-details { margin:30px 5px; }.pinned-details h3 { font-size:20px; margin:10px 0 8px; }.pinned-details p { font-size:14px; } }
@media(prefers-reduced-transparency:reduce) { .pin-board { background:#eef5f5; backdrop-filter:none; }.pin-card { background:#f8fbfb; } }
@media(prefers-reduced-motion:reduce) { .pin-drag-cursor { display:none; } }
html.reduce-motion .pin-drag-cursor { display:none; }
/* Keep each miniature composition complete within its preview. */
.pin-note { padding:10px 15px; }
.pin-note strong { font-size:19px; margin:7px 0 8px; }
.pin-note>span { margin-top:3px; }
.pin-numbers { padding:10px 15px; }
.pin-numbers>div { min-height:0; }
.pin-numbers strong { margin:8px 0 7px; }
.pin-numbers span { padding:4px 0; }
.pin-mail>div { padding:10px 13px; }
.pin-mail strong { margin:8px 0 5px; }
.pin-lines { margin-top:6px; gap:3px; }
@media(max-width:480px) { .pin-note,.pin-numbers { padding:10px 9px; }.pin-note strong { font-size:17px; margin:8px 0 10px; }.pin-numbers strong { margin:11px 0; }.pin-mail>div { padding:9px; } }
.pin-note { font-size:8px; line-height:1.3; }
.pin-note small { display:block; }
.pin-note strong { font-size:18px; line-height:1.05; margin:6px 0 7px; }
.pin-note>span { margin-top:2px; }
@media(max-width:480px) { .pin-note strong { font-size:17px; margin:8px 0 10px; } }
.pin-cinema-toolbar>div:first-child { min-width:0; flex:1; }
.pin-narration { min-height:3em; }
@media(max-width:850px) { .pin-cinema-toolbar { align-items:start; flex-direction:column; gap:14px; } }
.pin-music { padding:10px 14px; }
.pin-music>div:not(.pin-album) { font-size:7px; line-height:1.3; }
.pin-music small,.pin-music span { display:block; }
.pin-music b { line-height:1; }
@media(max-width:480px) { .pin-music { padding:10px 9px; } }

/* Release availability remains visible alongside the feature preview. */
.pin-coming-soon { display:inline-block; margin-left:10px; padding:5px 10px; border:1px solid #638a9b55; border-radius:999px; background:#e6f0f3; color:#345c70; font-size:11px; letter-spacing:.06em; white-space:nowrap; vertical-align:middle; }
.pin-availability { max-width:720px; margin:-20px 0 32px; color:#456576; font-size:15px; line-height:1.7; }