#postcard { padding-block:48px; scroll-margin-top:-96px; }

#postcard .experience-heading { margin-bottom:28px; }
#postcard .experience-heading h2 { font-size:clamp(34px,4.5vw,68px); }
#postcard .postcard-message { width:100%; max-width:640px; margin:0 auto 24px; }
#postcard .postcard-message-field {display: flex; align-items: center; min-height: 64px; padding: 6px 8px; border: 1px solid var(--field-border); border-radius: 40px; background: var(--ui-surface); overflow: hidden;}
#postcard .postcard-message-field:focus-within {outline: 2px solid var(--accent); outline-offset: var(--focus-offset);}
#postcard .postcard-message-field input {flex: 1; width: 0; min-width: 0; padding: 12px 16px; min-height: 52px; background: transparent; border: 0; border-radius: 0; font-size: var(--type-input);}

#postcard .postcard-message-field button {display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 10px; min-height: 44px; margin-right: 0; border-left: 1px solid #3b3b50; padding: 8px 18px; color: var(--accent); font-size: var(--type-control); white-space: nowrap;}
#postcard svg {width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;}
#postcard .postcard-stage { overflow:visible; border:0; background:none; aspect-ratio:auto; margin-bottom:24px; }
#postcard #postcard-canvas { display:block; width:100%; height:auto; aspect-ratio:16/9; border:1px solid #373149; border-radius:16px; background:#070a12; }

#postcard .module-status { border-radius:16px; }
#postcard .postcard-dock { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:flex; align-items:center; width:max-content; max-width:calc(100% - 36px); padding:6px 14px; border:1px solid #373149; border-radius:40px; background:#0b0e18f5; backdrop-filter:blur(10px); gap:14px; }
#postcard .postcard-dock button {display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 12px; font-size: var(--type-control); border-radius: 4px; white-space: nowrap;}
#postcard .postcard-modes { margin:0; gap:4px; flex-wrap:nowrap; }
#postcard .postcard-modes button { position:relative; border:0; background:none; }
#postcard .postcard-modes button[aria-pressed=true] { color:var(--accent); }
#postcard .postcard-modes button[aria-pressed=true]::after { content:""; position:absolute; height:2px; bottom:0; left:10px; right:10px; background:var(--accent); }
#postcard .postcard-colors { display:flex; gap:10px; align-items:center; border:0; border-left:1px solid #3b3b50; padding:0 0 0 14px; min-width:0; margin:0; }
#postcard .postcard-swatches { display:flex; align-items:center; gap:0; }
#postcard .postcard-swatches label { position:relative; width:36px; height:44px; display:grid; place-items:center; cursor:pointer; }
#postcard .postcard-swatches input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
#postcard .postcard-swatches span { width:17px; height:17px; border-radius:50%; outline-offset:5px; pointer-events:none; }
#postcard .swatch-gold { background:#ffdcad; }
#postcard .swatch-white { background:#f4f1e7; }
#postcard .swatch-blue { background:#bcecff; }
#postcard .swatch-violet { background:#e5c4ff; }
#postcard .postcard-swatches input:checked+span { outline:1px solid var(--accent); }
#postcard .postcard-swatches input:focus-visible+span {outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset);}
#star-color-name {font-size: var(--type-caption); color: #dedce7; min-width: 70px;}
#postcard .postcard-trail { position:relative; flex-direction:row; align-items:center; justify-content:center; gap:12px; border-left:1px solid #3b3b50; padding-left:18px; height:44px; cursor:pointer; color:#dedce7; }
#postcard .postcard-trail input { position:absolute; right:0; width:44px; height:44px; margin:0; opacity:0; cursor:pointer; }
#postcard .postcard-trail-track { position:relative; width:38px; height:22px; border:1px solid #7f7a91; border-radius:20px; background:#171621; pointer-events:none; }
#postcard .postcard-trail-track::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#b9b5c2; }
#postcard .postcard-trail input:checked+.postcard-trail-track { border-color:var(--accent); background:#d3ff5b18; }
#postcard .postcard-trail input:checked+.postcard-trail-track::after { transform:translateX(16px); background:var(--accent); }
#postcard .postcard-trail input:focus-visible+.postcard-trail-track {outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset);}
#postcard #star-undo { border-left:1px solid #3b3b50; border-radius:0; padding-left:18px; }
#postcard button:disabled { cursor:default; }
#postcard .postcard-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
#postcard .postcard-draft {display: flex; align-items: center; gap: 14px; color: #b9b5c2; font-size: var(--type-caption);}
#postcard .postcard-draft>svg { width:23px; height:23px; }
#postcard #star-clear { display:flex; align-items:center; justify-content:center; gap:10px; border-left:1px solid #3b3b50; border-radius:0; padding:8px 12px 8px 18px; margin:0; min-height:52px; font-size:12px; }
#postcard #star-clear svg { width:18px; height:18px; }
#postcard .postcard-export { display:flex; align-items:center; gap:18px; }
#postcard #star-share {display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--type-caption); padding: 8px 0;}
#postcard #star-save {padding: 12px 26px; gap: 22px;}
#postcard .postcard-help {font-size: var(--type-caption); color: #b9b5c2; margin-top: 16px; line-height: 1.7;}
#postcard .postcard-writing-tools { display:flex; align-items:center; justify-content:flex-end; gap:18px; margin:-8px 0 18px; }
#postcard .postcard-writing-tools progress { width:140px; height:3px; accent-color:var(--accent); }
#postcard [hidden] { display:none!important; }
.postcard-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.postcard-save-flight { position:fixed; inset:0 auto auto 0; z-index:10003; pointer-events:none; touch-action:none; transform-origin:0 0; border:1px solid #606575; border-radius:7px; box-shadow:0 6px 18px #00000038; contain:strict; will-change:transform,opacity; cursor:default; }
#star-save[aria-busy=true] { cursor:progress; }
#star-save span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(hover:hover) and (pointer:fine) { #postcard button:not(:disabled):hover { color:var(--accent); } #postcard .postcard-message-field button:hover { background:#d3ff5b08; } }
@media(max-width:1100px) { #postcard .postcard-dock { position:relative; left:auto; bottom:auto; transform:none; width:100%; max-width:none; margin-top:14px; justify-content:center; flex-wrap:wrap; border-radius:16px; gap:8px; } }
@media(max-width:760px) { #postcard .postcard-message-field input {padding: 12px 16px; font-size: var(--type-input);} #postcard .postcard-message-field button {font-size: var(--type-control); padding-inline: 14px; gap: 8px;} #postcard .postcard-dock { padding:8px; } #postcard .postcard-colors { padding-left:10px; } #postcard .postcard-swatches label { width:44px; } #postcard .postcard-footer { gap:16px; } #postcard .postcard-draft {font-size: var(--type-caption); gap: 10px;} #postcard #star-clear { margin-left:0; padding-inline:12px; } #postcard .postcard-export { margin-left:auto; } }
@media(max-width:520px) { #postcard .experience-heading { margin-bottom:22px; } #postcard .experience-heading h2 { font-size:34px; } #postcard .postcard-message-field {flex-wrap: wrap; border-radius: 12px; border: 1px solid var(--field-border); background: var(--ui-surface);} #postcard .postcard-message-field input {flex-basis: 100%; width: 100%; min-height: 48px; font-size: var(--type-input);} #postcard .postcard-message-field button { width:100%; margin:0; border-left:0; border-top:1px solid #4b455f; min-height:44px; } #postcard #postcard-canvas { border-radius:10px; } #postcard .postcard-modes { width:100%; justify-content:center; } #postcard .postcard-modes button { flex:1; } #postcard .postcard-colors { width:100%; justify-content:center; border-left:0; padding:0; } #postcard .postcard-trail { border-left:0; padding:0 16px; } #postcard .postcard-export { width:100%; justify-content:space-between; gap:12px; padding-right:48px; } #postcard #star-save {flex: 1; justify-content: space-between; padding-inline: 18px; gap: 12px;} }