:root{color-scheme:light;--paper:#f6edde;--paper-2:#fffaf1;--ink:#38271f;--muted:#866f61;--coral:#df7858;--coral-deep:#bd5e45;--line:#dfd2c2;--shadow:rgba(70,45,29,.16);font-family:"Songti SC","Noto Serif SC",Georgia,serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f8f8f6;color:var(--ink)}body{display:grid;place-items:start center;padding:28px 12px;background-image:radial-gradient(circle,#d8d5cf 1px,transparent 1px);background-size:18px 18px}button,input,textarea{font:inherit}.phone-app{position:relative;width:min(430px,100%);height:min(900px,calc(100svh - 24px));min-height:700px;overflow:hidden;background:var(--paper);border:7px solid #272421;border-radius:44px;box-shadow:0 26px 70px var(--shadow);isolation:isolate}.phone-app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.32;background-image:radial-gradient(circle at 20% 30%,rgba(104,72,47,.16) 0 .5px,transparent .8px),linear-gradient(120deg,rgba(255,255,255,.28),transparent 55%);background-size:10px 11px,100% 100%}.app-status{position:absolute;z-index:20;top:0;left:0;right:0;height:37px;display:flex;align-items:center;justify-content:space-between;padding:6px 19px 0;font:600 12px system-ui,sans-serif;pointer-events:none}.app-screen{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;padding:48px 24px 24px;background:radial-gradient(circle at 80% 2%,rgba(229,173,119,.18),transparent 23%),radial-gradient(circle at 15% 100%,rgba(132,157,143,.13),transparent 25%),var(--paper);opacity:0;transform:translateX(34px);pointer-events:none;transition:opacity .38s ease,transform .38s ease}.app-screen.active{opacity:1;transform:none;pointer-events:auto}.app-screen[hidden]{display:flex}.eyebrow{margin:0 0 10px;color:var(--coral-deep);font:500 12px/1.2 system-ui,sans-serif;letter-spacing:.16em}.create-heading{height:142px;padding:16px 8px 0;animation:fade-up .9s ease both}.create-heading h1,.making-heading h2,.player-heading h2{margin:0;font-weight:500;letter-spacing:.02em}.create-heading h1{font-size:clamp(30px,8vw,39px);line-height:1.28}.drawing-surface{position:relative;flex:1;min-height:310px;max-height:470px;border-radius:22px;overflow:hidden;background:#fffdf8;box-shadow:inset 0 0 0 1px rgba(110,79,52,.09),0 13px 30px rgba(82,53,33,.09)}#drawingCanvas{display:block;width:100%;height:100%;touch-action:none}.drawing-surface::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:radial-gradient(circle,rgba(88,61,39,.17) 0 .55px,transparent .8px);background-size:9px 10px}.canvas-empty{position:absolute;inset:0;display:grid;place-items:center;color:#b7a99a;font-size:14px;pointer-events:none}.canvas-empty.hidden{display:none}.canvas-actions{position:absolute;z-index:3;right:12px;top:12px;display:flex;gap:8px}.canvas-actions button,.round-button{width:42px;height:42px;border:0;border-radius:50%;color:var(--ink);background:rgba(255,252,246,.85);box-shadow:0 4px 13px rgba(76,50,31,.08)}.canvas-actions button:disabled{opacity:.35}.note-bubble{position:absolute;z-index:4;opacity:0;transform:translate(-50%,-50%) scale(.7);padding:5px 8px;border-radius:14px;background:var(--ink);color:#fff;font:12px system-ui,sans-serif;pointer-events:none;transition:.2s}.note-bubble.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.paint-controls{display:grid;grid-template-columns:76px 1fr;gap:13px;align-items:center;padding:14px 5px 8px}.color-wheel{position:relative;width:62px;height:62px;border-radius:50%;background:conic-gradient(#f64,#fc3,#7d6,#4cd,#66f,#c5e,#f64);box-shadow:0 5px 14px rgba(69,45,29,.14)}.color-wheel input{position:absolute;inset:0;width:100%;height:100%;opacity:0}.color-wheel span{position:absolute;inset:15px;border-radius:50%;background:var(--picked,var(--coral));box-shadow:0 0 0 4px var(--paper-2);pointer-events:none}.brush-control>span:first-child{display:block;margin-bottom:5px;color:var(--coral-deep);font-size:14px}.brush-row{display:grid;grid-template-columns:1fr 1px 34px;gap:9px;align-items:center}.brush-row input{width:100%;accent-color:var(--coral)}.brush-row output{position:absolute;opacity:0}.brush-row i{display:block;width:34px;height:var(--brush-height,11px);max-height:22px;border-radius:999px;background:var(--picked,var(--coral));opacity:.8;transform:rotate(-8deg)}.message-field{display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;min-height:55px;padding:7px 14px;border:1px solid rgba(104,72,48,.16);border-radius:18px;background:rgba(255,255,255,.48)}.message-field textarea{width:100%;height:38px;padding:8px 0;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}.message-field small{color:#aa998b;font:11px system-ui,sans-serif}.primary-action{width:100%;min-height:54px;margin-top:12px;border:0;border-radius:28px;color:#fffaf3;background:var(--coral);box-shadow:0 11px 24px rgba(181,85,60,.22);font-size:17px;letter-spacing:.05em}.primary-action:disabled{opacity:.48;box-shadow:none}.screen-back{position:absolute;left:24px;top:51px}.making-heading{padding:94px 8px 0}.making-heading h2{font-size:36px;line-height:1.3}.weaving-visual{position:relative;flex:1;min-height:330px;margin:12px -24px 0;overflow:hidden}.color-ribbon{position:absolute;left:-28%;width:156%;height:74px;border-radius:50%;opacity:.62;filter:blur(3px);animation:ribbon-flow 4.2s ease-in-out infinite alternate}.ribbon-coral{top:72px;background:linear-gradient(90deg,transparent,rgba(224,123,91,.58),rgba(234,198,135,.42),transparent);transform:rotate(-12deg)}.ribbon-sage{top:147px;background:linear-gradient(90deg,transparent,rgba(124,151,135,.55),rgba(148,177,184,.46),transparent);transform:rotate(10deg);animation-delay:-1.1s}.ribbon-blue{top:215px;background:linear-gradient(90deg,transparent,rgba(166,151,181,.38),rgba(224,123,91,.36),transparent);transform:rotate(-6deg);animation-delay:-2s}.floating-word{position:absolute;color:rgba(94,76,64,.48);font-size:15px;animation:word-float 4s ease-in-out infinite alternate}.word-one{top:68px;left:19%}.word-two{top:164px;right:20%;animation-delay:-1s}.word-three{top:245px;left:46%;animation-delay:-2s}.making-wave{position:absolute;left:12%;right:12%;bottom:22px;height:84px;display:flex;gap:4px;align-items:center;justify-content:center}.making-wave i{display:block;width:4px;height:calc(10px + var(--h)*1px);border-radius:999px;background:var(--coral);opacity:.68;animation:wave-pulse .85s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-45ms)}.process-steps{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0 2px;list-style:none;color:var(--muted);font:12px system-ui,sans-serif}.process-step{position:relative;padding-top:22px;text-align:center}.process-step i{position:absolute;top:3px;left:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#d7ccbf;transition:.3s}.process-step::after{content:"";position:absolute;top:7px;left:calc(50% + 8px);width:calc(100% - 16px);height:2px;background:#ddd2c5}.process-step:last-child::after{display:none}.process-step.done i,.process-step.active i{background:var(--coral)}.process-step.active i{transform:scale(1.45);box-shadow:0 0 0 7px rgba(223,120,88,.14)}.making-status{margin:19px 0 0;text-align:center;font-size:16px}.making-detail{min-height:36px;margin:5px 0 0;text-align:center;color:var(--muted);font-size:13px}.player-topbar{display:flex;justify-content:space-between;position:relative}.more-menu{position:absolute;z-index:8;right:0;top:48px;display:grid;min-width:135px;padding:7px;border-radius:14px;background:#fffaf2;box-shadow:0 12px 28px rgba(68,43,29,.16)}.more-menu[hidden]{display:none}.more-menu button,.more-menu a{padding:11px;border:0;background:transparent;color:var(--ink);text-decoration:none;text-align:left}.player-heading{text-align:center;padding:19px 0 0}.player-heading h2{font-size:30px}.player-object{position:relative;width:100%;height:370px;margin:10px auto 0;display:grid;place-items:center}.player-object img{width:112%;max-height:360px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(58,35,21,.2))}.player-object canvas{position:absolute;left:50%;top:55.5%;width:19%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #d79251}.player-object canvas.spinning{animation:record-spin 3.4s linear infinite}.record-gloss{position:absolute;left:50%;top:55.5%;width:19%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset 10px 8px 12px rgba(255,255,255,.16);pointer-events:none}.track-copy{text-align:center;min-height:83px}.track-copy h3{margin:0 0 7px;font-size:25px;font-weight:500}.track-copy p{margin:0 auto;max-width:320px;color:var(--muted);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom-player input{width:100%;accent-color:var(--coral)}.time-row{display:flex;justify-content:space-between;color:var(--muted);font:12px system-ui,sans-serif}.play-controls{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:7px}.play-controls button{min-width:48px;min-height:48px;border:0;background:transparent;color:var(--ink);font-size:20px}.play-controls .play-toggle{width:68px;height:68px;border-radius:50%;background:var(--coral);color:white;font-size:25px;box-shadow:0 9px 20px rgba(177,82,58,.22)}.player-actions{display:flex;justify-content:space-between;margin-top:auto}.player-actions button{min-height:44px;border:0;background:transparent;color:var(--muted);font-size:15px}.share-sheet{position:absolute;z-index:12;left:16px;right:16px;bottom:16px;padding:17px;border-radius:22px;background:#fffaf2;box-shadow:0 20px 50px rgba(58,37,24,.24)}.share-sheet[hidden]{display:none}.share-sheet p{margin:0 0 10px}.share-sheet input{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px}.share-sheet div{display:flex;justify-content:flex-end;gap:18px;margin-top:11px}.share-sheet button,.share-sheet a{border:0;background:transparent;color:var(--coral-deep);text-decoration:none}.support-bank{display:none!important}.toast{position:fixed;z-index:100;left:50%;bottom:25px;transform:translateX(-50%);padding:11px 16px;border-radius:20px;background:var(--ink);color:#fff;font:14px system-ui,sans-serif}.toast[hidden]{display:none}@keyframes fade-up{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}@keyframes ribbon-flow{to{translate:0 25px;scale:1.08 .78;filter:blur(5px)}}@keyframes word-float{to{translate:12px -16px;opacity:.42}}@keyframes wave-pulse{to{transform:scaleY(.45);opacity:.38}}@keyframes record-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media(max-width:520px){body{display:block;padding:0;background:var(--paper)}.phone-app{width:100%;height:100svh;min-height:650px;border:0;border-radius:0;box-shadow:none}.app-status{padding-top:max(6px,env(safe-area-inset-top))}.app-screen{padding-bottom:max(20px,env(safe-area-inset-bottom))}}@media(max-height:760px){.app-screen{padding-top:42px}.create-heading{height:114px;padding-top:5px}.create-heading h1{font-size:30px}.drawing-surface{min-height:250px}.paint-controls{padding-top:8px;padding-bottom:5px}.making-heading{padding-top:75px}.weaving-visual{min-height:260px}.player-object{height:300px}.player-object img{max-height:295px}.player-heading{padding-top:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.app-screen[hidden]{display:none!important}
.message-field #sentence{width:100%;height:38px;padding:8px 0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px}

/* User-supplied creation-page artwork */
#screenCreate{background-color:#fbf4ea;background-image:linear-gradient(rgba(255,250,242,.08),rgba(255,250,242,.08)),url('/assets/creation-background.png');background-position:center top;background-size:cover}
#screenCreate .create-heading{text-shadow:0 1px 0 rgba(255,255,255,.82)}
#screenCreate .drawing-surface{background:rgba(255,253,248,.94);backdrop-filter:blur(2px)}
#screenCreate .paint-controls,#screenCreate .message-field{border-radius:18px;background:rgba(255,250,242,.76);backdrop-filter:blur(5px)}
#screenCreate .paint-controls{padding-left:10px;padding-right:10px}

/* Top-down turntable: the drawing becomes the record label */
.player-object{height:354px;margin-top:7px}
.turntable-deck{position:relative;width:min(100%,334px);aspect-ratio:1;border:3px solid rgba(91,55,34,.24);border-radius:29px;background:linear-gradient(145deg,#b17f5b,#8b5d43 68%,#784c36);box-shadow:inset 0 0 0 3px rgba(255,225,190,.2),0 18px 30px rgba(58,35,21,.21)}
.turntable-deck::before{content:"";position:absolute;inset:12px;border:1px solid rgba(72,40,24,.18);border-radius:20px;pointer-events:none}
.vinyl-disc{position:absolute;left:45%;top:51%;width:78%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:repeating-radial-gradient(circle at center,#181615 0 5px,#24211f 6px 8px,#11100f 9px 12px);box-shadow:inset 0 0 0 2px #0e0d0c,inset 0 0 22px rgba(255,255,255,.07),0 12px 18px rgba(42,24,15,.32);will-change:transform}
.vinyl-disc.spinning{animation:record-spin 3.4s linear infinite}
.vinyl-shine{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 28deg,transparent 0 12%,rgba(255,255,255,.055) 14%,transparent 18% 47%,rgba(255,255,255,.035) 50%,transparent 55%);pointer-events:none}
.vinyl-disc canvas{position:absolute;left:50%;top:50%;width:40%;height:40%;aspect-ratio:1;border:5px solid #ead2a8;border-radius:50%;transform:translate(-50%,-50%);background:#fffaf1;box-shadow:0 0 0 2px rgba(55,35,25,.5);object-fit:cover}
.record-spindle{position:absolute;z-index:3;left:50%;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);background:#3d291f;box-shadow:0 0 0 2px rgba(255,245,226,.75)}
.tonearm{position:absolute;z-index:4;right:20px;top:19px;width:73px;height:255px;transform:rotate(-7deg);transform-origin:50% 25px;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.tonearm.playing{transform:rotate(7deg)}
.tonearm-pivot{position:absolute;z-index:2;left:17px;top:0;width:48px;height:48px;border:9px solid #d7bc9d;border-radius:50%;background:#957259;box-shadow:0 4px 9px rgba(46,27,17,.25)}
.tonearm-rod{position:absolute;left:37px;top:40px;width:13px;height:178px;border-radius:10px;transform:rotate(-10deg);transform-origin:top;background:linear-gradient(90deg,#8b725f,#f0e2cf 45%,#8e7560);box-shadow:3px 5px 8px rgba(46,27,17,.24)}
.tonearm-head{position:absolute;left:7px;top:202px;width:43px;height:22px;border-radius:5px;transform:rotate(-10deg);background:linear-gradient(180deg,#dbc2a6,#8e6a50);box-shadow:0 4px 6px rgba(45,27,18,.28)}
@media(max-height:760px){.player-object{height:282px}.turntable-deck{width:min(100%,270px)}.tonearm{right:15px;top:14px;width:59px;height:206px}.tonearm-pivot{left:14px;width:39px;height:39px;border-width:7px}.tonearm-rod{left:30px;top:32px;width:11px;height:144px}.tonearm-head{left:6px;top:164px;width:35px;height:18px}}

/* Design-only review controls, enabled only with ?preview=1 */
.preview-toolbar{position:absolute;z-index:50;right:13px;bottom:10px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid rgba(94,61,40,.16);border-radius:18px;background:rgba(255,250,242,.9);box-shadow:0 7px 18px rgba(61,38,24,.14);backdrop-filter:blur(8px);font:12px system-ui,sans-serif}
.preview-toolbar[hidden]{display:none}
.preview-toolbar span{padding:0 5px;color:#8d5e46;font-weight:650}
.preview-toolbar button{min-height:28px;padding:0 8px;border:0;border-radius:13px;color:var(--muted);background:transparent;font:12px system-ui,sans-serif}
.preview-toolbar button.active{color:#fff;background:var(--coral)}
.ui-preview .player-actions,.ui-preview .primary-action{margin-bottom:34px}
@media(max-width:520px){.preview-toolbar{position:fixed;right:max(9px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}.preview-toolbar span{display:none}}

/* A roomy, handwriting-like ruled letter field */
#screenCreate{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.message-field{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto 18px;gap:0 8px;align-items:start;min-height:132px;padding:11px 14px 8px;border-radius:18px;background:rgba(255,251,244,.86)}
.message-field>span{grid-column:1;grid-row:1;padding-top:7px;color:#8f5d47}
.message-field #sentence{grid-column:2;grid-row:1;width:100%;min-height:96px;max-height:220px;height:96px;padding:0 7px 0 12px;resize:none;border:0;border-left:2px solid rgba(201,107,80,.18);outline:0;color:#49352b;background-color:transparent;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,rgba(126,94,70,.2) 31px,transparent 32px);background-attachment:local;font-family:"KaiTi","STKaiti","FZKai-Z03",cursive;font-size:18px;font-weight:500;line-height:32px;letter-spacing:.035em;overflow-x:hidden}
.message-field #sentence::placeholder{color:#ae9c8d;font-family:"KaiTi","STKaiti",cursive}
.message-field small{grid-column:2;grid-row:2;justify-self:end;align-self:end;color:#9c8879;font-size:12px}

/* Scrollable creation flow with breathing room */
#screenCreate{display:flex;overflow-x:hidden;overflow-y:auto;padding-bottom:56px;scroll-behavior:smooth}
#screenCreate .create-heading{flex:0 0 auto;height:auto;margin-bottom:28px;padding-top:18px}
#screenCreate .drawing-surface{flex:0 0 auto;width:calc(100% + 16px);height:clamp(360px,53vh,478px);min-height:360px;max-height:478px;margin-right:-8px;margin-bottom:26px;margin-left:-8px}
#screenCreate .paint-controls{flex:0 0 auto;grid-template-columns:68px minmax(0,1fr) 54px;gap:13px;width:100%;margin-bottom:30px;padding:0 4px}
#screenCreate .message-field{flex:0 0 auto;width:calc(100% - 4px);margin:0 2px 32px}
#screenCreate .primary-action{flex:0 0 auto;margin:0 0 48px}
.ui-preview #screenCreate .primary-action{margin-bottom:82px}

/* Soft eraser shares the brush-size control */
.eraser-tool{display:grid;place-items:center;align-content:center;gap:2px;width:54px;height:62px;padding:5px 3px;border:1px solid rgba(104,72,48,.14);border-radius:17px;color:var(--muted);background:rgba(255,251,244,.72);box-shadow:0 5px 13px rgba(74,46,28,.08);transition:.2s ease}
.eraser-tool i{display:block;font:28px/1 system-ui,sans-serif;transform:rotate(-25deg)}
.eraser-tool span{font:12px/1.1 system-ui,sans-serif}
.eraser-tool.active{color:#fff;background:var(--coral);border-color:transparent;box-shadow:0 7px 16px rgba(181,85,60,.22)}
.brush-row i.eraser-preview{height:18px!important;border:1px solid rgba(95,67,49,.2);background:linear-gradient(135deg,#fffdf8 0 55%,#efb49f 56% 100%);opacity:1}

/* Torn, taped letter paper. The coarse silhouette stays stable while the field grows. */
.message-field{position:relative;isolation:isolate;grid-template-columns:22px 1fr;grid-template-rows:auto 18px;gap:0 8px;min-height:146px;padding:24px 24px 17px;border:0;border-radius:0;background:transparent;filter:none}
.message-field::before{content:"";position:absolute;z-index:-1;inset:0;background-color:#fffaf0;background-image:radial-gradient(circle at 12% 20%,rgba(123,86,57,.08) 0 .7px,transparent .9px),radial-gradient(circle at 75% 66%,rgba(151,105,65,.06) 0 .65px,transparent .9px),linear-gradient(110deg,rgba(255,255,255,.5),transparent 48%);background-size:13px 14px,17px 16px,100% 100%;clip-path:polygon(1.5% 4%,7% 2%,13% 4.2%,20% 1.4%,27% 3.6%,34% 1.8%,41% 4%,49% 1.5%,57% 3.5%,64% 1.7%,72% 4.1%,80% 1.8%,88% 3.5%,96% 1.4%,99% 7%,98.3% 18%,99.4% 30%,98.2% 43%,99.2% 56%,98.1% 70%,99.2% 83%,97.8% 96%,91% 98.3%,84% 96.4%,76% 99%,68% 96.7%,59% 98.8%,51% 96.2%,43% 99%,35% 96.5%,27% 98.6%,19% 96.2%,11% 98.5%,3% 96.4%,.8% 88%,1.7% 76%,.5% 64%,1.6% 51%,.6% 38%,1.8% 25%,.7% 13%);filter:drop-shadow(0 10px 9px rgba(75,47,30,.18)) drop-shadow(0 2px 2px rgba(67,43,28,.12))}
.message-field .paper-tape{position:absolute;z-index:2;top:-12px;left:26px;width:74px;height:28px;transform:rotate(-5deg);background:linear-gradient(100deg,rgba(235,213,172,.62),rgba(250,233,196,.78),rgba(224,199,151,.58));border:1px solid rgba(116,83,49,.08);box-shadow:0 2px 4px rgba(74,47,29,.08);pointer-events:none}
.message-field>span,.message-field #sentence,.message-field small{position:relative;z-index:1}
.message-field #sentence{padding-left:12px;background-color:transparent}
@media(max-height:760px){#screenCreate .create-heading{height:auto;margin-bottom:24px;padding-top:8px}#screenCreate .drawing-surface{height:350px;min-height:350px}#screenCreate .paint-controls{margin-bottom:26px}}

/* Thin torn drawing paper: image frame, transparent paint layer, fine fibre overlay. */
#screenCreate .drawing-surface{position:relative;overflow:visible;background:transparent;box-shadow:none;backdrop-filter:none}
.drawing-paper{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 13px 14px rgba(74,47,29,.15)) drop-shadow(0 2px 2px rgba(74,47,29,.09))}
#drawingCanvas{position:absolute;z-index:1;inset:6% 7%;width:86%;height:88%;background:transparent;touch-action:none}
#screenCreate .drawing-surface::after{z-index:2;inset:6% 7%;border-radius:2px;opacity:.14;background-image:radial-gradient(circle at 18% 24%,rgba(101,75,53,.16) 0 .42px,transparent .72px),radial-gradient(circle at 70% 62%,rgba(130,96,65,.12) 0 .38px,transparent .68px);background-size:11px 12px,15px 14px}
#screenCreate .canvas-empty{z-index:3;inset:8%;color:#aa9b8b}
#screenCreate .canvas-actions{z-index:6;right:2%;top:-49px}

/* Compact brush-size control: the dot previews the selected diameter. */
.brush-control{display:flex;height:66px;min-width:0;align-items:center}
.brush-control>.brush-row:first-child{display:grid;margin-bottom:0;color:inherit;font-size:inherit}
.brush-row{display:grid;width:100%;height:66px;grid-template-columns:minmax(0,1fr) 34px;gap:12px;align-items:center}
.brush-row input{display:block;margin:0;align-self:center}
.brush-size-dot{--dot-size:14px;display:block;width:var(--dot-size);height:var(--dot-size);justify-self:center;border:1px solid rgba(87,57,38,.12);border-radius:50%;background:var(--picked,var(--coral));box-shadow:inset 0 1px 2px rgba(255,255,255,.32),0 2px 5px rgba(70,45,29,.14);transition:width .15s ease,height .15s ease,background .15s ease}
.brush-size-dot.eraser-preview{background:#fffaf2;box-shadow:inset 0 0 0 3px #e7b39f,0 2px 5px rgba(70,45,29,.14)}

/* Dimensional eraser icon, matching the stationery treatment. */
.eraser-tool{height:66px;color:#8f674f;background:rgba(255,252,246,.83);box-shadow:0 7px 16px rgba(74,46,28,.1)}
.eraser-icon{display:block;width:41px;height:29px;overflow:visible;filter:drop-shadow(0 3px 3px rgba(70,45,29,.15))}
.eraser-tool span{font-family:"KaiTi","STKaiti",cursive;font-size:13px}
.eraser-tool.active{color:#fff7ef;background:var(--coral)}

/* Loose-leaf letter paper with three punched holes and torn lower edge. */
#screenCreate .message-field{grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 18px;min-height:156px;padding:27px 24px 17px 31px}
#screenCreate .message-field::before{background-color:#fffdf5;background-image:radial-gradient(circle at 15% 22%,rgba(124,90,62,.055) 0 .55px,transparent .8px),linear-gradient(110deg,rgba(255,255,255,.48),transparent 52%);background-size:13px 14px,100% 100%;clip-path:polygon(1.4% 4%,8% 2%,15% 3.5%,23% 1.6%,31% 3.2%,40% 1.4%,49% 3.4%,58% 1.7%,67% 3.3%,76% 1.5%,85% 3.2%,94% 1.6%,99% 6%,98.4% 17%,99.4% 29%,98.1% 42%,99.2% 55%,98.2% 69%,99.3% 82%,97.8% 96%,91% 98.6%,84% 96%,76% 99%,68% 96.4%,60% 99%,52% 96.1%,44% 98.8%,36% 96%,28% 99%,20% 96.2%,12% 98.8%,3% 96%,.8% 86%,1.6% 73%,.6% 59%,1.5% 44%,.5% 29%,1.5% 15%)}
.paper-holes{position:absolute!important;z-index:2!important;top:20px;bottom:14px;left:8px;display:block!important;width:13px;padding:0!important;color:transparent!important;background-image:radial-gradient(circle at center,#eadcc8 0 5px,rgba(116,81,52,.2) 5.4px 5.8px,transparent 6.2px);background-position:center top;background-size:13px 23px;background-repeat:repeat-y;filter:drop-shadow(1px 2px 1px rgba(81,52,31,.13));pointer-events:none}
#screenCreate .message-field #sentence{grid-column:2;grid-row:1;min-height:96px;padding-left:12px;border-left:2px solid rgba(201,107,80,.16);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 30px,rgba(126,94,70,.18) 31px,transparent 32px)}
#screenCreate .message-field small{grid-column:2;grid-row:2}

/* Music-making page: supplied paper background, native transparent GIF, quiet floating notes. */
#screenMaking{padding-top:16px;background-image:linear-gradient(rgba(255,250,242,.18),rgba(255,250,242,.32)),url("./assets/making-background.png?v=21");background-position:center;background-size:cover}
#screenMaking .screen-back,#screenMaking .making-heading,#screenMaking .process-steps,#screenMaking .making-status,#screenMaking .making-detail{position:relative;z-index:3}
#screenMaking .screen-back{position:absolute;left:auto;right:24px;top:18px}
#screenMaking .making-heading{padding:26px 64px 0 8px}
.making-animation{position:relative;z-index:1;display:grid;flex:1;min-height:310px;margin:-4px -8px 0;place-items:center;overflow:visible}
.edge-filter{position:absolute;pointer-events:none}
.making-gif-visual{position:relative;z-index:2;display:block;width:min(79vw,320px);max-width:100%;height:auto;filter:url(#removeWhiteEdge) drop-shadow(0 18px 18px rgba(91,53,32,.18))}
.floating-notes{position:absolute;z-index:1;inset:0;pointer-events:none}
.floating-notes span{position:absolute;left:var(--x);top:var(--y);color:#b86548;font:500 25px/1 Georgia,serif;opacity:.34;text-shadow:0 2px 5px rgba(102,61,36,.12);animation:note-drift 4.8s ease-in-out infinite alternate;animation-delay:var(--delay)}
.floating-notes span:nth-child(2n){font-size:31px;color:#9b7853;animation-duration:5.8s}.floating-notes span:nth-child(3n){font-size:20px;animation-duration:4.2s}
#screenMaking .process-steps{margin:0 -2px;padding:14px 10px 0;border-radius:18px 18px 0 0;background:rgba(255,250,242,.62);backdrop-filter:blur(4px)}
#screenMaking .making-status{margin-top:0;padding-top:18px;background:rgba(255,250,242,.62)}
#screenMaking .making-detail{margin-top:0;padding:5px 14px 10px;border-radius:0 0 18px 18px;background:rgba(255,250,242,.62)}
@keyframes note-drift{from{transform:translate3d(-4px,8px,0) rotate(-9deg)}to{transform:translate3d(8px,-14px,0) rotate(8deg);opacity:.56}}
@media(max-height:760px){#screenMaking .making-heading{padding-top:18px}.making-animation{min-height:245px}.making-gif-visual{width:min(68vw,265px)}}

/* The web page is the phone UI itself; native status-bar ornaments are intentionally omitted. */
.app-screen{padding-top:28px}
@media(max-width:520px){.app-screen{padding-top:max(24px,env(safe-area-inset-top))}}
@media(max-height:760px){.app-screen{padding-top:24px}#screenMaking{padding-top:12px}}

/* Preview round 22: roomier creation controls and a more expressive music-making scene. */
#screenCreate .create-heading{padding-top:28px}
#screenCreate .canvas-actions button{background:rgba(255,252,246,.96);box-shadow:0 5px 14px rgba(76,50,31,.13)}

#screenMaking .making-heading{padding-top:38px}
.ambient-ribbons{position:absolute;z-index:0;inset:-8% -28%;overflow:hidden;pointer-events:none}
.ambient-ribbons i{position:absolute;left:0;width:150%;height:70px;border-radius:50%;filter:blur(13px);opacity:.18;animation:ambient-drift 8s ease-in-out infinite alternate}
.ambient-ribbons i:nth-child(1){top:11%;background:linear-gradient(90deg,transparent,#d86e52 28%,#efaa88 62%,transparent);transform:rotate(-10deg)}
.ambient-ribbons i:nth-child(2){top:48%;background:linear-gradient(90deg,transparent,#b94f40 24%,#e78b6e 66%,transparent);transform:rotate(9deg);animation-delay:-3.2s}
.ambient-ribbons i:nth-child(3){top:77%;background:linear-gradient(90deg,transparent,#efb095 25%,#c65c49 64%,transparent);transform:rotate(-7deg);animation-delay:-5.1s}
.floating-notes{z-index:3}
.floating-notes span{color:#a93f34;opacity:.28;text-shadow:0 3px 7px rgba(135,49,39,.16)}
.floating-notes span:nth-child(2n){color:#d7745c;opacity:.45}.floating-notes span:nth-child(3n){color:#7f302c;opacity:.3}
.making-words{position:absolute;z-index:1;inset:0;pointer-events:none}
.making-words span{position:absolute;left:var(--x);top:var(--y);color:#9e6253;font:500 13px/1 "KaiTi","STKaiti",cursive;letter-spacing:.18em;opacity:0;animation:word-breathe 6.2s ease-in-out infinite;animation-delay:var(--delay)}
.workshop-wave{display:flex;z-index:3;height:55px;margin:-11px 18px 2px;align-items:center;justify-content:center;gap:5px;border-radius:18px;background:linear-gradient(90deg,transparent,rgba(255,250,242,.65) 14% 86%,transparent)}
.workshop-wave i{display:block;width:4px;height:calc(7px + var(--h)*.72px);border-radius:99px;background:linear-gradient(to bottom,#eb9c84,#bd4f3e);opacity:.76;transform-origin:center;animation:workshop-pulse .82s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-43ms)}
#screenMaking .process-step.done{color:#6f342d;font-weight:700}
#screenMaking .process-step.done i{transform:scale(1.18);box-shadow:0 0 0 5px rgba(190,75,58,.18);background:#bd4f3e}
#screenMaking .process-step.done::after{background:linear-gradient(90deg,#bd4f3e,#df7858)}
#screenMaking .process-step.active{color:#8b3d32;font-weight:700}

#screenPlayer{background-color:#faf0e2;background-image:linear-gradient(rgba(255,250,242,.12),rgba(255,250,242,.2)),url("./assets/player-background.png?v=22");background-position:center top;background-size:cover}

@keyframes ambient-drift{to{translate:10% 24px;scale:1.05 .78;opacity:.29}}
@keyframes word-breathe{0%,100%{opacity:0;transform:translateY(8px)}35%,68%{opacity:.33;transform:translateY(-7px)}}
@keyframes workshop-pulse{to{transform:scaleY(.42);opacity:.4}}
@media(max-height:760px){#screenCreate .create-heading{padding-top:17px}#screenMaking .making-heading{padding-top:27px}.workshop-wave{height:43px}.making-animation{min-height:225px}}

/* Preview round 23: alpha-masked torn paper, softer making states, light turntable, postcard overlay. */
#screenCreate .drawing-surface{height:clamp(380px,56vh,510px);min-height:380px;max-height:510px}
#drawingCanvas{inset:0;width:100%;height:100%;-webkit-mask-image:url("./assets/drawing-paper.png?v=23");mask-image:url("./assets/drawing-paper.png?v=23");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#screenCreate .drawing-surface::after{inset:0;border-radius:0;opacity:.11;-webkit-mask-image:url("./assets/drawing-paper.png?v=23");mask-image:url("./assets/drawing-paper.png?v=23");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#screenCreate .canvas-empty{inset:5%}
.paper-holes{background-size:13px 26px}

#screenMaking{background-image:linear-gradient(rgba(255,250,242,.1),rgba(255,250,242,.2)),url("./assets/making-background.png?v=23")}
.making-gif-visual{filter:drop-shadow(0 18px 18px rgba(91,53,32,.18))}
.ambient-ribbons{inset:-16% -42%;overflow:hidden}
.ambient-ribbons i{left:-8%;width:164%;height:94px;border-radius:48% 52% 46% 54%;filter:blur(18px);opacity:.11;will-change:transform;animation:watercolor-ribbon-a 16s ease-in-out infinite}
.ambient-ribbons i:nth-child(1){top:13%;background:linear-gradient(90deg,transparent 4%,rgba(226,151,132,.46) 28%,rgba(240,197,177,.34) 65%,transparent 96%);transform:translate3d(-2%,0,0) rotate(-9deg) scale(1)}
.ambient-ribbons i:nth-child(2){top:48%;background:linear-gradient(90deg,transparent 3%,rgba(222,196,155,.34) 27%,rgba(235,214,181,.42) 64%,transparent 97%);transform:translate3d(3%,0,0) rotate(8deg) scale(1.02);animation-name:watercolor-ribbon-b;animation-duration:19s;animation-delay:-7s}
.ambient-ribbons i:nth-child(3){top:76%;background:linear-gradient(90deg,transparent 4%,rgba(151,166,146,.3) 26%,rgba(190,193,169,.28) 66%,transparent 97%);transform:translate3d(-1%,0,0) rotate(-7deg) scale(.99);animation-name:watercolor-ribbon-c;animation-duration:14s;animation-delay:-4s}
.workshop-wave{background:none}
.workshop-wave i{background:linear-gradient(to bottom,#efb09e,#df8b71);opacity:.69}
#screenMaking .process-steps,#screenMaking .making-status,#screenMaking .making-detail{background:transparent;backdrop-filter:none}
#screenMaking .process-step{color:#8d7566;font-weight:400}
#screenMaking .process-step i{background:#d8d0c5}
#screenMaking .process-step::after{background:#ddd4c9}
#screenMaking .process-step.done{color:#76584a;font-weight:500}
#screenMaking .process-step.done i{transform:scale(1.12);background:#e8a28e;box-shadow:0 0 0 4px rgba(232,162,142,.16)}
#screenMaking .process-step.done::after{background:linear-gradient(90deg,#e8a28e,#efb3a0)}
#screenMaking .process-step.active{color:#765247;font-weight:550}
#screenMaking .process-step.active i{background:#df8165;box-shadow:0 0 0 7px rgba(223,129,101,.14)}

#screenPlayer{background-image:linear-gradient(rgba(255,250,242,.08),rgba(255,250,242,.15)),url("./assets/player-background.png?v=23")}
.turntable-deck{border-color:rgba(132,93,64,.24);background:linear-gradient(145deg,#fff7e9,#ead8be 66%,#ddc4a4);box-shadow:inset 0 0 0 3px rgba(255,255,255,.46),0 18px 30px rgba(77,48,29,.17)}
.turntable-deck::before{border-color:rgba(117,78,52,.16);box-shadow:inset 0 0 34px rgba(171,124,85,.08)}
.vinyl-disc{background:repeating-radial-gradient(circle at center,#171514 0 1px,#24211f 1.5px 2.5px,#11100f 3px 4px);box-shadow:inset 0 0 0 2px #0e0d0c,inset 0 0 25px rgba(255,255,255,.08),0 12px 18px rgba(42,24,15,.27)}
.vinyl-shine{inset:2.5%;background:conic-gradient(from 19deg,transparent 0 8%,rgba(255,255,255,.075) 10%,transparent 13% 28%,rgba(255,255,255,.035) 31%,transparent 35% 52%,rgba(255,255,255,.055) 55%,transparent 60% 78%,rgba(255,255,255,.028) 81%,transparent 85%),repeating-radial-gradient(circle at center,transparent 0 8px,rgba(255,255,255,.025) 9px,transparent 10px 14px)}
.tonearm{right:18px;top:17px;width:78px;height:257px}
.tonearm-pivot{left:15px;top:0;width:50px;height:50px;border-color:#dfc8a9;background:#a8896e}
.tonearm-rod{left:37px;top:36px;width:12px;height:187px;border-radius:8px;transform:rotate(10deg);background:linear-gradient(90deg,#9d836c,#f6ebdb 46%,#9a8069);box-shadow:3px 5px 8px rgba(46,27,17,.19)}
.tonearm-rod::after{content:"";position:absolute;left:-1px;bottom:-13px;width:14px;height:23px;border-radius:0 0 7px 7px;background:inherit}
.tonearm-head{left:26px;top:211px;width:43px;height:22px;transform:rotate(10deg);background:linear-gradient(180deg,#e9d8c1,#a9876a);box-shadow:0 4px 6px rgba(45,27,18,.22)}
.tonearm-head::after{content:"";position:absolute;right:-15px;top:6px;width:18px;height:10px;border-radius:0 6px 6px 0;background:linear-gradient(180deg,#d8c1a6,#9c7c63)}

.share-postcard-modal{position:absolute;z-index:40;inset:0;display:grid;overflow-x:hidden;overflow-y:auto;place-items:center;padding:28px 17px}
.share-postcard-modal[hidden]{display:none}
.share-postcard-backdrop{position:fixed;z-index:0;inset:0;background:rgba(78,53,38,.24);backdrop-filter:blur(7px) saturate(.78) brightness(.92)}
.share-postcard-stage{position:relative;z-index:1;width:min(100%,366px);margin:auto}
.share-postcard-close{position:absolute;z-index:4;right:-5px;top:-15px;width:40px;height:40px;border:1px solid rgba(110,76,53,.14);border-radius:50%;color:#684838;background:#fff9ed;box-shadow:0 8px 20px rgba(70,43,27,.18);font:25px/1 system-ui,sans-serif}
.share-postcard{position:relative;overflow:hidden;width:100%;padding:21px 19px 18px;border:1px solid rgba(119,78,47,.2);border-radius:19px;color:#4b3024;background-color:#f5e5ca;background-image:radial-gradient(circle at 18% 22%,rgba(129,86,55,.08) 0 .6px,transparent .9px),linear-gradient(128deg,rgba(255,255,255,.36),transparent 46%);background-size:12px 13px,100% 100%;box-shadow:0 23px 54px rgba(67,42,26,.29)}
.postcard-visual{position:relative;height:295px}
.postcard-vinyl{position:absolute;right:-31px;top:39px;width:190px;height:190px;border-radius:50%;background:repeating-radial-gradient(circle,#171514 0 2px,#262320 2.5px 4px,#111 4.5px 6px);box-shadow:0 10px 18px rgba(50,31,21,.25)}
.postcard-vinyl::after{content:"";position:absolute;inset:38%;border-radius:50%;background:#bd735b;box-shadow:0 0 0 2px rgba(255,240,218,.25)}
.postcard-vinyl i{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 12%,rgba(255,255,255,.09) 14%,transparent 18% 56%,rgba(255,255,255,.05) 58%,transparent 62%);z-index:2}
.postcard-photo{position:absolute;z-index:2;left:2px;top:8px;width:245px;height:274px;padding:13px 13px 38px;background:#efe0c5;border:1px solid rgba(119,78,47,.18);box-shadow:0 10px 18px rgba(73,46,28,.2);transform:rotate(-1.2deg)}
.postcard-photo canvas{display:block;width:100%;height:100%;background:#fffaf0;object-fit:cover}
.postcard-photo span{position:absolute;left:18px;bottom:10px;color:#8b624a;font:italic 22px/1 "Segoe Script","KaiTi",cursive}
.archive-stamp{position:absolute;z-index:3;right:6px;top:0;display:grid;width:72px;height:72px;place-items:center;border:2px solid rgba(174,99,72,.58);border-radius:50%;color:rgba(157,85,61,.72);font:600 10px/1.4 Georgia,serif;letter-spacing:.08em;text-align:center;transform:rotate(8deg)}
.postcard-title-row{display:flex;align-items:end;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(119,78,47,.28);padding-bottom:11px}
.postcard-title-row h3{margin:0;font-size:25px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.postcard-wave{display:flex;height:34px;flex:0 0 76px;align-items:center;justify-content:center;gap:3px}
.postcard-wave i{width:2px;height:var(--wave,12px);border-radius:4px;background:#c58a6a}.postcard-wave i:nth-child(2n){height:22px}.postcard-wave i:nth-child(3n){height:31px}.postcard-wave i:nth-child(5n){height:17px}
.share-postcard blockquote{min-height:58px;margin:13px 0 8px;color:#6d4a39;font:500 16px/1.65 "KaiTi","STKaiti",cursive}
.postcard-player{display:grid;grid-template-columns:43px 1fr 45px;gap:10px;align-items:center}
.postcard-player button{width:43px;height:43px;border:0;border-radius:50%;color:#fff7e9;background:#c87c61;box-shadow:0 5px 12px rgba(146,75,52,.2)}
.postcard-player input{width:100%;accent-color:#c87c61}.postcard-player time{color:#7e5b48;font:12px Georgia,serif;text-align:right}
.share-postcard footer{display:flex;justify-content:space-between;margin-top:13px;padding-top:12px;border-top:1px solid rgba(119,78,47,.28);color:#775643;font:11px Georgia,serif;letter-spacing:.14em}.share-postcard footer b{font-weight:400}
.share-postcard-actions{display:flex;justify-content:center;gap:7px;margin-top:12px;flex-wrap:wrap}
.share-postcard-actions button,.share-postcard-actions a{min-height:37px;padding:0 13px;border:1px solid rgba(110,76,53,.2);border-radius:19px;color:#644434;background:rgba(255,249,237,.94);text-decoration:none;font:13px system-ui,sans-serif;box-shadow:0 5px 13px rgba(67,42,26,.12)}

@keyframes watercolor-ribbon-a{0%,100%{transform:translate3d(-2%,0,0) rotate(-9deg) scale(1)}50%{transform:translate3d(6%,16px,0) rotate(-7.5deg) scale(1.035,.97)}}
@keyframes watercolor-ribbon-b{0%,100%{transform:translate3d(3%,0,0) rotate(8deg) scale(1.02)}50%{transform:translate3d(-5%,-12px,0) rotate(6.5deg) scale(.99,1.035)}}
@keyframes watercolor-ribbon-c{0%,100%{transform:translate3d(-1%,0,0) rotate(-7deg) scale(.99)}50%{transform:translate3d(5%,10px,0) rotate(-5.5deg) scale(1.04,.98)}}
@media(max-height:760px){#screenCreate .drawing-surface{height:370px;min-height:370px}.tonearm{right:13px;top:12px;width:63px;height:208px}.tonearm-pivot{left:12px;width:41px;height:41px;border-width:7px}.tonearm-rod{left:30px;top:29px;width:10px;height:151px}.tonearm-head{left:20px;top:171px;width:35px;height:18px}.share-postcard-modal{padding-top:18px;padding-bottom:18px}.share-postcard{padding:17px 16px 15px}.postcard-visual{height:244px}.postcard-photo{width:205px;height:228px}.postcard-vinyl{width:158px;height:158px}.postcard-title-row h3{font-size:22px}.share-postcard blockquote{min-height:42px;margin:9px 0;font-size:15px}.share-postcard footer{margin-top:9px;padding-top:9px}}

/* Preview round 24: mobile safe areas, instrument archive, connected tonearm and audience postcards. */
.app-screen{padding-top:max(34px,calc(env(safe-area-inset-top) + 18px));padding-right:max(24px,env(safe-area-inset-right));padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px));padding-left:max(24px,env(safe-area-inset-left))}
#screenCreate .create-heading{padding-top:22px}
#screenMaking{padding-top:max(34px,calc(env(safe-area-inset-top) + 18px))}
#screenMaking .screen-back{top:max(18px,calc(env(safe-area-inset-top) + 12px))}
#screenMaking .making-heading{padding-top:24px}
#screenPlayer .player-topbar{padding-top:4px}

.workshop-wave{height:76px;margin:-42px 8px 0;gap:6px}
.workshop-wave i{width:5px;height:calc(10px + var(--h)*.86px)}
#screenMaking .process-steps{margin-top:-5px;padding-top:10px}
#screenMaking .making-status{min-height:46px;margin:3px 0 0;padding:15px 10px 8px;color:#785e51;font:500 15px/1.55 "KaiTi","STKaiti",cursive;transition:opacity .33s ease,transform .33s ease}
#screenMaking .making-status.line-leave{opacity:0;transform:translateY(-5px)}
#screenMaking .making-status.line-enter{animation:waiting-line-in .48s ease both}
#screenMaking .making-detail{display:none!important}

.player-topbar{align-items:center;gap:8px}
.player-top-actions{display:flex;gap:7px}
.archive-entry{min-height:39px;padding:0 14px;border:1px solid rgba(130,80,58,.15);border-radius:20px;color:#8b5e4c;background:rgba(255,249,239,.78);box-shadow:0 5px 13px rgba(71,44,29,.08);font:13px "KaiTi","STKaiti",cursive}
.favorite-current.active{color:#b95f60;background:#fff1ed}
.player-object{height:322px;margin-top:2px}
.turntable-deck{width:min(100%,300px);border-color:rgba(144,87,73,.22);background:linear-gradient(145deg,#fff3ef,#efd6ce 58%,#e3bfb4);box-shadow:inset 0 0 0 3px rgba(255,255,255,.48),0 17px 28px rgba(92,52,40,.16)}
.turntable-deck::before{border-color:rgba(153,91,75,.15);box-shadow:inset 0 0 30px rgba(180,105,88,.06)}
.vinyl-disc{left:50%;top:50%;width:72%}
.tonearm{right:4px;top:4px;width:98px;height:270px;transform:rotate(-4deg);transform-origin:70% 11%;overflow:visible}
.tonearm.playing{transform:rotate(3deg)}
.tonearm-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 6px 5px rgba(76,43,34,.19))}
.tonearm-pivot,.tonearm-rod,.tonearm-head{display:none}
.player-actions{gap:11px;margin-top:14px}
.player-actions button{flex:1;min-height:47px;padding:0 13px;border:1px solid rgba(125,77,58,.18);border-radius:24px;color:#7e5949;background:rgba(255,248,238,.82);box-shadow:0 7px 15px rgba(74,45,29,.09);font-size:14px}
.player-actions #shareNow{border-color:transparent;color:#fff9f3;background:linear-gradient(135deg,#d98570,#c86d59);box-shadow:0 9px 18px rgba(173,83,61,.2)}

.postcard-customizer{margin:0 0 11px;padding:12px;border:1px solid rgba(111,74,51,.15);border-radius:17px;background:rgba(255,249,239,.95);box-shadow:0 8px 20px rgba(67,42,26,.13)}
.postcard-customizer>p{margin:0 0 9px;color:#6b4939;font:15px "KaiTi","STKaiti",cursive}
.audience-options{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}.audience-options::-webkit-scrollbar{display:none}
.audience-options button{flex:0 0 auto;min-height:30px;padding:0 10px;border:1px solid rgba(125,80,56,.16);border-radius:15px;color:#80604f;background:#fffaf2;font:12px system-ui,sans-serif}.audience-options button.active{border-color:transparent;color:white;background:#c87c61}
.postcard-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.postcard-fields label{color:#896d5e;font:11px system-ui,sans-serif}.postcard-fields input{width:100%;height:32px;margin-top:4px;padding:0 8px;border:1px solid rgba(125,80,56,.17);border-radius:9px;outline:0;color:#573c30;background:rgba(255,255,255,.7);font:14px "KaiTi","STKaiti",cursive}.postcard-fields input:disabled{opacity:.48}
.postcard-recipient{margin:1px 0 7px;color:var(--postcard-accent,#c87c61);font:15px "KaiTi","STKaiti",cursive}.postcard-signature{margin:-7px 0 8px;color:var(--postcard-ink,#4b3024);font:14px "KaiTi","STKaiti",cursive;text-align:right}
.share-postcard{--postcard-paper:#dfe9ed;--postcard-accent:#708da0;--postcard-ink:#3f5661;background-color:var(--postcard-paper);color:var(--postcard-ink)}
.share-postcard[data-audience="teacher"]{--postcard-paper:#e9e4cf;--postcard-accent:#879275;--postcard-ink:#43483b}
.share-postcard[data-audience="friend"]{--postcard-paper:#f3e7bd;--postcard-accent:#ce9350;--postcard-ink:#5b4e35}
.share-postcard[data-audience="family"]{--postcard-paper:#f0ddc8;--postcard-accent:#bd7158;--postcard-ink:#55372b}
.share-postcard[data-audience="lover"]{--postcard-paper:#efddd9;--postcard-accent:#ad6870;--postcard-ink:#56373d}
.share-postcard[data-audience="self"]{--postcard-paper:#e7e2eb;--postcard-accent:#82758e;--postcard-ink:#453e4c}
.share-postcard .archive-stamp{border-color:color-mix(in srgb,var(--postcard-accent) 72%,transparent);color:var(--postcard-accent)}
.share-postcard .postcard-wave i,.share-postcard .postcard-player button{background:var(--postcard-accent)}
.share-postcard .postcard-player input{accent-color:var(--postcard-accent)}

.archive-modal{position:absolute;z-index:42;inset:0;display:grid;overflow:hidden}
.archive-modal[hidden]{display:none}
.archive-backdrop{position:absolute;inset:0;background:rgba(76,50,37,.22);backdrop-filter:blur(7px) saturate(.82)}
.archive-panel{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;height:100%;padding:max(36px,calc(env(safe-area-inset-top) + 20px)) 20px max(24px,calc(env(safe-area-inset-bottom) + 16px));background:rgba(250,241,227,.95);background-image:linear-gradient(rgba(255,255,255,.24),transparent),radial-gradient(circle at 20% 20%,rgba(119,81,54,.07) 0 .55px,transparent .8px);background-size:100% 100%,13px 14px}
.archive-panel>header{display:flex;align-items:center;justify-content:space-between}.archive-panel>header .eyebrow{margin-bottom:5px}.archive-panel h3{margin:0;font-size:29px;font-weight:500}
.archive-tabs{display:flex;gap:8px;margin:20px 0 14px}.archive-tabs button{min-height:36px;padding:0 15px;border:1px solid rgba(118,75,52,.15);border-radius:18px;color:#846657;background:rgba(255,250,242,.72)}.archive-tabs button.active{color:white;background:#cf7b64;border-color:transparent}
.archive-list{display:grid;gap:12px;overflow-y:auto;padding:2px 2px 76px}
.archive-card{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:10px;border:1px solid rgba(112,73,50,.13);border-radius:17px;background:rgba(255,250,242,.84);box-shadow:0 8px 19px rgba(72,45,28,.09)}
.archive-card>img{width:104px;height:118px;border-radius:10px;object-fit:cover;background:#fffaf0}
.archive-card-copy{min-width:0}.archive-card-copy>p{display:flex;justify-content:space-between;margin:1px 0 5px;color:#9b8070;font:10px system-ui,sans-serif}.archive-card h4{margin:0;color:#4b3328;font-size:18px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.archive-card blockquote{margin:5px 0 7px;color:#806759;font:14px/1.4 "KaiTi","STKaiti",cursive;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.archive-card-copy>div{display:flex;gap:5px;flex-wrap:wrap}.archive-card button{min-height:28px;padding:0 8px;border:0;border-radius:14px;color:#795949;background:#f3e5d3;font:11px system-ui,sans-serif}.archive-card .archive-heart{font-size:17px;line-height:1}.archive-card .archive-heart.active{color:#b75158;background:#f7dfdb}
.archive-empty{margin:auto;color:#9a8172;font:18px/1.8 "KaiTi","STKaiti",cursive;text-align:center}

@keyframes waiting-line-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-height:760px){#screenMaking .making-heading{padding-top:14px}.making-animation{min-height:214px}.workshop-wave{height:61px;margin-top:-33px}.player-object{height:270px}.turntable-deck{width:min(100%,255px)}.tonearm{right:2px;top:2px;width:84px;height:229px}.postcard-customizer{padding:10px}.postcard-fields{margin-top:6px}.archive-panel{padding-top:max(26px,calc(env(safe-area-inset-top) + 15px))}}

/* Preview round 29: switchable archive postcard prototype. */
.share-postcard-modal{place-items:start center;padding-top:max(28px,calc(env(safe-area-inset-top) + 18px));padding-bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px))}
.share-postcard-stage{width:min(100%,378px)}
.share-postcard-close{position:absolute;z-index:12;right:-6px;top:-12px;margin:0}
.postcard-customizer{position:relative;z-index:6;margin-bottom:12px;padding:13px 12px 12px;background:rgba(255,250,242,.96);backdrop-filter:blur(10px)}
.postcard-customizer>p{font-size:16px}
.audience-options{gap:4px}
.audience-options button{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding-inline:8px;font-size:11px;transition:color .2s ease,background .2s ease,transform .2s ease}
.audience-options button::before{content:"";width:7px;height:7px;border-radius:50%;background:#78889a;box-shadow:0 0 0 3px rgba(120,136,154,.12)}
.audience-options button[data-postcard-audience="teacher"]::before{background:#778367}.audience-options button[data-postcard-audience="friend"]::before{background:#dc735f}.audience-options button[data-postcard-audience="family"]::before{background:#758363}.audience-options button[data-postcard-audience="lover"]::before{background:#ae6a73}.audience-options button[data-postcard-audience="self"]::before{background:#6a7e76}
.audience-options button.active{background:#6f8194;transform:translateY(-1px)}
.audience-options button[data-postcard-audience="teacher"].active{background:#778367}.audience-options button[data-postcard-audience="friend"].active{background:#d86855}.audience-options button[data-postcard-audience="family"].active{background:#71805d}.audience-options button[data-postcard-audience="lover"].active{background:#a76268}.audience-options button[data-postcard-audience="self"].active{background:#667a72}
.audience-options button.active::before{background:#fff;box-shadow:none}

.share-postcard{isolation:isolate;overflow:visible;min-height:684px;padding:18px 18px 17px;border-color:rgba(107,78,53,.24);border-radius:22px;background-image:radial-gradient(circle at 18% 22%,rgba(105,81,61,.1) 0 .65px,transparent .9px),linear-gradient(135deg,rgba(255,255,255,.5),transparent 44%),linear-gradient(0deg,rgba(117,84,57,.025),rgba(117,84,57,.025));background-size:11px 12px,100% 100%,100% 100%;box-shadow:0 25px 58px rgba(59,41,29,.28)}
.share-postcard::after{content:"";position:absolute;z-index:-1;inset:8px;border:1px solid rgba(110,82,59,.12);border-radius:16px;pointer-events:none}
.postcard-visual{height:309px}
.postcard-vinyl{z-index:1;right:48px;top:45px;width:201px;height:201px;background:repeating-radial-gradient(circle,#171514 0 2px,#292622 2.5px 4px,#111 4.5px 6px);box-shadow:0 12px 22px rgba(45,31,22,.3)}
.postcard-vinyl::before{content:"";position:absolute;z-index:2;inset:3%;border-radius:50%;background:conic-gradient(from 25deg,transparent 0 11%,rgba(255,255,255,.13) 13%,transparent 18% 57%,rgba(255,255,255,.07) 59%,transparent 65%)}
.postcard-vinyl::after{inset:37%;background:var(--postcard-accent);box-shadow:0 0 0 6px rgba(255,245,225,.42),inset 0 0 0 15px rgba(64,48,37,.12)}
.postcard-photo{z-index:2;left:0;top:11px;width:247px;height:281px;padding:12px 12px 39px;border-radius:3px;background:#f1e5d1;transform:rotate(-1.3deg);box-shadow:0 13px 24px rgba(66,45,31,.23)}
.postcard-photo::after{content:"";position:absolute;inset:7px;border:1px solid rgba(111,82,59,.1);pointer-events:none}
.postcard-photo canvas{position:relative;z-index:1;border:1px solid rgba(104,76,55,.1)}
.postcard-photo span{z-index:2;left:16px;bottom:11px;color:var(--postcard-ink);font-size:20px;opacity:.76}
.archive-stamp{z-index:5;right:-32px;top:-10px;width:132px;height:70px;border:0;border-radius:0;background:none;transform:rotate(-30deg);filter:drop-shadow(0 1px 0 rgba(255,255,255,.75))}
.archive-stamp::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("./assets/archive-stamp.png") center/contain no-repeat;mask:url("./assets/archive-stamp.png") center/contain no-repeat;opacity:.96}
.archive-stamp::after{display:none}
.postcard-theme-art{position:absolute;z-index:4;right:-47px;top:97px;width:172px;height:278px;object-fit:contain;object-position:center;pointer-events:none;filter:drop-shadow(0 7px 5px rgba(57,43,30,.14));transition:opacity .25s ease,transform .35s ease}
.share-postcard[data-audience="custom"] .postcard-theme-art{right:-39px;top:115px;width:150px;height:252px;transform:rotate(-3deg)}
.share-postcard[data-audience="teacher"] .postcard-theme-art{right:-30px;top:94px;width:151px;height:292px;transform:rotate(1deg)}
.share-postcard[data-audience="friend"] .postcard-theme-art{right:-44px;top:99px;width:167px;height:280px;transform:rotate(2deg)}
.share-postcard[data-audience="family"] .postcard-theme-art{right:-45px;top:83px;width:170px;height:296px;transform:rotate(2deg)}
.share-postcard[data-audience="lover"] .postcard-theme-art{right:-43px;top:102px;width:166px;height:286px;transform:rotate(-1deg)}
.share-postcard[data-audience="self"] .postcard-theme-art{right:-42px;top:94px;width:165px;height:292px;transform:rotate(1deg)}
.postcard-recipient{position:relative;z-index:3;margin:0 0 6px;padding-left:4px;font-size:14px}
.postcard-title-row{position:relative;z-index:3;align-items:center;padding:0 0 10px;border-bottom-color:rgba(100,79,60,.32)}
.postcard-title-row h3{max-width:245px;font:500 24px/1.25 "Songti SC","Noto Serif SC",serif}
.postcard-wave{display:none}
.postcard-title-row h3{max-width:100%}
.postcard-message{position:relative;z-index:3;min-height:91px;padding-right:20px;background:repeating-linear-gradient(to bottom,transparent 0 29px,rgba(101,82,63,.18) 30px 31px)}
.share-postcard blockquote{min-height:88px;margin:10px 0 6px;padding:4px 0 0 24px;color:var(--postcard-ink);font-size:15px;line-height:1.95}
.share-postcard blockquote::before,.share-postcard blockquote::after{position:absolute;color:var(--postcard-accent);font:700 33px/1 Georgia,serif}.share-postcard blockquote::before{content:"“";left:0;top:9px}.share-postcard blockquote::after{content:"”";right:0;bottom:-3px}
.postcard-address-lines{display:none}
.postcard-signature{position:relative;z-index:4;margin:-4px 22px 6px 0}
.postcard-player{position:relative;z-index:3;grid-template-columns:44px 1fr 44px;margin-top:6px}
.postcard-player input{height:18px}
.share-postcard footer{position:relative;z-index:3;margin-top:12px;padding-top:11px;color:var(--postcard-ink);opacity:.78}
.share-postcard-actions{padding-bottom:6px}

@media(max-height:760px){.share-postcard-modal{place-items:start center;padding-top:max(18px,calc(env(safe-area-inset-top) + 10px))}.share-postcard{min-height:622px;padding:15px}.postcard-visual{height:269px}.postcard-photo{width:220px;height:250px}.postcard-vinyl{right:45px;top:39px;width:179px;height:179px}.archive-stamp{right:-30px;top:-9px;width:118px;height:63px}.postcard-theme-art{top:86px!important;width:150px!important;height:250px!important}.postcard-title-row h3{font-size:21px}.postcard-message{min-height:76px}.share-postcard blockquote{min-height:74px;font-size:14px;line-height:1.85}}

/* Preview round 25: reference turntable, tighter making rhythm and archive in more menu. */
#screenPlayer .player-topbar{justify-content:space-between}
#screenPlayer .player-heading{padding-top:14px}
#screenPlayer .more-menu{right:0;top:48px;min-width:148px}
#screenPlayer .more-menu button{font-family:"KaiTi","STKaiti",cursive;font-size:15px;text-align:center}

#screenMaking .workshop-wave{height:76px;margin:-118px 8px 0}
#screenMaking .workshop-wave,#screenMaking .process-steps,#screenMaking .making-status{transform:translateY(-42px)}

#screenPlayer .turntable-deck{width:min(100%,300px);border:3px solid #d5ad9a;background:radial-gradient(circle at 34% 26%,rgba(129,87,57,.055) 0 .7px,transparent 1px),linear-gradient(145deg,#fffaf0,#f0e2cd 62%,#e5cfb6);background-size:12px 13px,100% 100%;box-shadow:inset 0 0 0 4px rgba(255,255,255,.58),inset 0 0 25px rgba(139,91,60,.055),0 17px 28px rgba(92,52,40,.15)}
#screenPlayer .turntable-deck::before{inset:10px;border:2px solid rgba(185,128,100,.37);border-radius:20px;box-shadow:inset 0 0 0 3px rgba(255,252,242,.68)}
#screenPlayer .turntable-deck::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 12px 12px,#8f735f 0 2px,#d7c0a6 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 12px) 12px,#8f735f 0 2px,#d7c0a6 2.5px 4px,transparent 4.5px),radial-gradient(circle at 12px calc(100% - 12px),#8f735f 0 2px,#d7c0a6 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),#8f735f 0 2px,#d7c0a6 2.5px 4px,transparent 4.5px)}
#screenPlayer .vinyl-disc{left:50%;top:50%;width:72%;background:repeating-radial-gradient(circle at center,#2a1d18 0 1.5px,#3b2922 2px 4px,#241915 4.5px 6px);box-shadow:inset 0 0 0 2px #1c1411,inset 0 0 24px rgba(255,234,211,.095),0 12px 18px rgba(53,31,21,.28)}
#screenPlayer .vinyl-shine{opacity:.34;filter:sepia(.42)}
#screenPlayer .vinyl-disc canvas{border-color:#e8d0a4;background:#fff8e8;box-shadow:0 0 0 2px rgba(73,47,33,.48)}
#screenPlayer .record-spindle{background:#5e3d2c;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
#screenPlayer .tonearm{right:4px;top:4px;width:98px;height:270px}
#screenPlayer .tonearm-svg{filter:drop-shadow(2px 5px 4px rgba(70,43,30,.2))}

@media(max-height:760px){#screenMaking .workshop-wave{margin-top:-92px}#screenMaking .workshop-wave,#screenMaking .process-steps,#screenMaking .making-status{transform:translateY(-30px)}#screenPlayer .turntable-deck{width:min(100%,255px)}}

/* Preview round 28: lighter player proportions and calmer waiting copy. */
#screenMaking .making-status{top:-32px;transition:opacity .42s ease,transform .42s ease}
#screenMaking .making-status.line-enter{animation-duration:.6s}
#screenPlayer .turntable-deck{width:min(100%,278px)}
#screenPlayer .vinyl-disc{width:82%}
#screenPlayer .tonearm{right:1px;top:2px;width:84px;height:232px}
@media(max-height:760px){#screenMaking .making-status{top:-23px}#screenPlayer .turntable-deck{width:min(100%,238px)}#screenPlayer .tonearm{right:0;top:1px;width:72px;height:199px}}

/* Preview round 37: lower create-page controls, clearer postcard hierarchy, and a shorter card. */
#screenCreate .create-heading{position:relative;top:10px}
#screenCreate .create-heading h1{font-size:36px;line-height:1.3}
#screenCreate .canvas-actions{top:-21px}
.share-postcard{min-height:620px}
.postcard-title-row{margin-bottom:7px;padding-bottom:0;border-bottom:0}
.postcard-recipient{margin:0 0 11px;padding:0 0 3px 4px;color:color-mix(in srgb,var(--postcard-ink) 88%,#241914);font-size:15px;font-weight:700;line-height:1.8;letter-spacing:.025em}
.postcard-message{border-top:1px solid rgba(100,79,60,.32)}
.postcard-signature{font-weight:700}
@media(max-height:760px){.share-postcard{min-height:570px}}

/* Preview round 39: use the supplied Yuan Yuan Xing Shu for the postcard message only. */
@font-face{font-family:"YuanYuanXingShu";src:url("./assets/yuan-yuan-xing-shu.ttf?v=39") format("truetype");font-weight:400;font-style:normal;font-display:swap}
.share-postcard blockquote{font-family:"YuanYuanXingShu","KaiTi","STKaiti",cursive;font-size:18px;font-weight:400;line-height:1.7}
@media(max-height:760px){.share-postcard blockquote{font-size:17px;line-height:1.75}}