:root { --paper:#08120f; --ink:#f0f3e8; --muted:#aabeb2; --red:#d8efa9; --line:#b1dbbd25; --depth-ease:cubic-bezier(.22,1,.36,1); }
body { background:#08120f; isolation:isolate; }
.sound-space { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:radial-gradient(ellipse at 90% 25%,#234a383d,transparent 65%),#08120f; }
#sound-space { display:block; width:100%; height:100%; opacity:.72; }
.space-haze { position:absolute; inset:0; background:linear-gradient(90deg,#08120fda,transparent 70%),radial-gradient(ellipse at 10% 60%,#42614428,transparent 60%); }
.space-grid { position:absolute; bottom:-24%; left:-50%; width:200%; height:70%; background-image:linear-gradient(#b5e9c910 1px,transparent 1px),linear-gradient(90deg,#b5e9c910 1px,transparent 1px); background-size:80px 80px; transform:perspective(500px) rotateX(65deg); mask-image:linear-gradient(transparent,#0008); }
.preview-banner { background:#bde0c80a; border-bottom:1px solid #d5f2d512; font-size:8px; display:flex; justify-content:center; align-items:center; gap:22px; }
.effects-toggle { border:1px solid #d3e7bd40; border-radius:99px; background:#12251bc0; color:#d8efa9; font-size:9px; padding:7px 12px; min-height:30px; }
.effects-toggle::before { content:'◌'; margin-right:7px; }
.site-header { border-bottom:1px solid #d5edce20; }
.hero { padding-block:85px 100px; perspective:1400px; }
.hero-copy { position:relative; z-index:1; }
.hero h1 { text-shadow:0 5px 0 #08120f,0 18px 40px #0006; }
.hero h1 em { display:inline-block; text-shadow:0 1px #b5ca8b,0 3px #677d4c,0 8px 25px #a9d47e25; }
.button { border-top-color:#f6ffd57d; border-bottom-color:#70844c; box-shadow:0 5px 0 #455d32,0 12px 26px #0006,inset 0 1px 0 #ffffff55; transform:translateY(-2px); }
.button:active { transform:translateY(2px) scale(.985); box-shadow:0 1px 0 #455d32,0 4px 12px #0004; }
.site-header .button { box-shadow:0 3px 0 #0b1e12,0 10px 25px #0003,inset 0 1px #b9efca20; background:#12251ba6; }
.record-experience { padding:24px 16px 20px; border-radius:30px; border:1px solid #b1e6c633; background:linear-gradient(140deg,#c6f2bf10,#07251d3d); box-shadow:inset 0 1px #efffe52b,6px 8px 0 #07150f,20px 30px 65px #0007; transform:perspective(1300px) rotateY(-7deg) rotateX(3deg); }
.studio-film { mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent); }
.edition-meta { color:#c6e6c5; }
.record-stage { height:400px; }
.benefit-strip { background:#10251ac9; backdrop-filter:blur(10px); border-block:1px solid #d7efb82c; box-shadow:0 10px 35px #0003; }
.section-heading h2 em,.offer-story h2 em,.faq-section h2 em { text-shadow:0 3px 0 #456442,0 15px 25px #0008; }
.sample-grid { perspective:1400px; gap:30px; }
.sample-card { --tilt-x:0deg; --tilt-y:0deg; padding:15px 15px 5px; border-radius:20px; background:linear-gradient(145deg,#24372bee,#0f211bcc); border:1px solid #cde6bf38; box-shadow:inset 0 1px #f1ffde20,5px 7px 0 #030d08,15px 25px 35px #0005; transform:perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-style:preserve-3d; transition:transform 220ms var(--depth-ease),box-shadow 220ms ease; }
.sample-card .cover { min-height:300px; transform:translateZ(20px); box-shadow:0 12px 25px #0008,3px 3px 0 #717c62; border-radius:10px; }
.sample-card .track { transform:translateZ(12px); }
.sample-card .story { min-height:70px; }
.sample-card .text-button { color:#d6ecbd; }
.cover h3 { font-size:clamp(30px,3.1vw,46px); }
.sample-art { position:absolute; width:110px; height:110px; top:30px; right:16px; object-fit:contain; transform:rotate(9deg); pointer-events:none; }
.cover-love .sample-art { transform:rotate(-10deg); }
.cover-party .sample-art { transform:rotate(12deg); }
.mark-icon,.arrow-icon,.note-icon { display:inline-block; width:1em; height:1em; vertical-align:-.1em; fill:none; stroke:currentColor; stroke-width:1.7; }
.mark-icon { stroke-width:1.5; }
.emotion-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 9px; }
.how-section { background:#071510b8; border-block:1px solid #d7efb827; position:relative; }
.steps-grid { gap:25px; perspective:1200px; }
.steps-grid article { position:relative; border:1px solid #c8e4b832; border-radius:22px; padding:28px; background:linear-gradient(150deg,#2d4535e0,#0a211ccf); box-shadow:inset 0 1px #eaffdc26,0 6px #061810,0 22px 35px #0004; }
.steps-grid article:nth-child(2) { transform:translateY(25px); }
.steps-grid article:nth-child(3) { transform:translateY(50px); }
.steps-grid .step-number { display:inline-grid; place-items:center; width:62px; height:62px; border-radius:18px; padding:0; border:1px solid #c6e5ad4d; background:linear-gradient(150deg,#95ae70,#273e2a); color:#f2f8d6; box-shadow:4px 5px 0 #071e13,8px 12px 18px #0005; transform:rotate(-8deg); font-size:35px; }
.how-section .section { padding-bottom:145px; }
.lyric-note { padding:28px; border:1px solid #adc7943d; border-radius:0 22px 22px 22px; background:#112a21b3; box-shadow:8px 10px 0 #05110b,20px 25px 35px #0004; transform:perspective(900px) rotateY(6deg) rotateZ(-2deg); }
.price-card { border-radius:24px; background:linear-gradient(140deg,#e9efcf,#c9d9b6); box-shadow:inset 0 2px #fff,7px 9px 0 #739069,25px 35px 55px #0007; transform:perspective(1300px) rotateY(-6deg) rotateZ(1deg); }
.price-card .button { box-shadow:0 5px #102611,0 12px 25px #294c3438,inset 0 1px #ffffff3d; }
.faq-list details { background:#152b20d6; border:1px solid #cee7b32b; margin-bottom:12px; padding-inline:22px; border-radius:15px; box-shadow:0 4px 0 #05150b,0 12px 23px #0003; transition:background 180ms; }
.faq-list details[open] { background:#233c2beb; }
.faq-list summary { font-size:13px; }
.closing { background:radial-gradient(ellipse at 70% 120%,#8bac5b44,transparent),#12281ad9; border-block:1px solid #c4e59955; color:#edf3df; box-shadow:inset 0 2px #d9ffbc22; position:relative; overflow:hidden; }
.closing::before { content:''; position:absolute; width:500px; height:500px; border:30px solid #bfdd9133; border-radius:50%; right:-150px; top:-130px; transform:perspective(500px) rotateY(65deg); box-shadow:inset 5px 0 20px #daefa03b,20px 20px 40px #0006; pointer-events:none; }
.closing .wrap { position:relative; }
.closing .button.light { color:#112914; background:#d8efa9; }
.mobile-cta { background:#0b201bed; box-shadow:0 -8px 30px #0005,inset 0 1px #c1e0ad3b; backdrop-filter:blur(12px); }
footer { background:#06100b70; }
/* The composer is a small, three-dimensional studio, with flat readable inputs. */
#order-dialog { --paper:#0d211a; --ink:#eff4e5; --muted:#adc3b3; --red:#dbefac; --line:#d7f0be2e; color-scheme:dark; width:min(1100px,calc(100% - 48px)); max-width:1100px; border:1px solid #cdeeb05c; border-radius:26px; background:linear-gradient(135deg,#1d362deF,#0a1b16f5); box-shadow:inset 0 1px #eeffde4d,0 8px 0 #041109,0 45px 140px #000b; }
#order-dialog::backdrop { background:#020c08a8; backdrop-filter:blur(8px); }
.dialog-shell { display:grid; grid-template-columns:.78fr 1fr; }
.dialog-header { grid-column:1/-1; background:#0c2119c9; padding:20px 30px; border-color:#c9e7b738; }
.dialog-header .brand-dot { color:#dcf3ac; }
.dialog-tools { display:flex; align-items:center; gap:12px; }
.icon-button { color:#e4efd6; border-color:#b9d39550; background:#29462b70; box-shadow:0 3px #071409; }
.icon-button:hover { background:#36503a; }
.form-shell { padding:32px 38px; position:relative; background:linear-gradient(155deg,#e1ffc70a,transparent 65%); border-left:1px solid #b5d9a32b; }
.form-shell::before { content:''; position:absolute; inset:10px; border:1px solid #c4e4ac0a; border-radius:20px; pointer-events:none; }
.form-meta { font-size:8px; }
.progress { display:flex; gap:7px; margin-bottom:30px; }
.progress li { flex:1; min-width:0; }
.purpose-options { display:grid; gap:18px; margin-block:28px; }
.purpose-options legend { margin-bottom:12px; }
.purpose-options label { position:relative; margin:0; cursor:pointer; }
.purpose-options input { position:absolute; opacity:0; width:1px; height:1px; }
.purpose-options label>span { display:block; padding:24px 22px; border:1px solid #b5d39750; border-radius:18px; background:linear-gradient(140deg,#304935,#11251b); box-shadow:0 5px #030e08,inset 0 1px #e2f8ce22; }
.purpose-options strong { display:block; font-size:18px; color:#e7f0d7; }
.purpose-options small { display:block; margin-top:8px; font-size:13px; font-weight:400; line-height:1.6; color:#b4cbb7; }
.purpose-options input:checked+span { border-color:#dcf6af; background:linear-gradient(140deg,#405d37,#233f28); box-shadow:0 3px #061708,inset 0 0 0 1px #dcf6af; }
.purpose-options input:focus-visible+span { outline:3px solid #c6e5a1; outline-offset:5px; }
#story-guidance { padding:16px 18px; font-size:12px; line-height:1.65; }
#story-guidance ul { padding-left:18px; margin:10px 0; }
#story-guidance li+li { margin-top:7px; }
#story-guidance p { font-size:11px; color:#aabeb2; }
.optional-details { margin-top:20px; }
#perspective-help { font-size:13px; line-height:1.7; margin-top:14px; color:var(--muted); }
#perspective-help p+p { margin-top:10px; }
.progress li { border:0; padding:9px 5px; text-align:center; border-radius:8px; background:#04120d; box-shadow:inset 0 2px 5px #0007,0 1px #c9dfa21c; font-size:9px; }
.progress li.active { background:linear-gradient(#c6e4a3,#90b078); color:#18371f; box-shadow:0 3px #486544,0 6px 15px #0005,inset 0 1px #fff9; transform:translateY(-2px); }
.progress li.done { color:#d8ecbc; background:#33503a; }
.form-step { perspective:1000px; }
.form-step h2 { font-size:43px; text-shadow:0 3px #07120d; }
#order-dialog input:not([type=radio]),#order-dialog select,#order-dialog textarea { background:#061810; border:1px solid #66866669; color:#f1f5e6; border-radius:12px; box-shadow:inset 0 3px 8px #0006,0 1px #defabc22; transition:border-color 160ms,box-shadow 160ms; }
#order-dialog input::placeholder,#order-dialog textarea::placeholder { color:#839d8d; }
#order-dialog input:focus,#order-dialog select:focus,#order-dialog textarea:focus { outline:2px solid #bddc8e; outline-offset:3px; border-color:#bddc8e; box-shadow:inset 0 2px 5px #0005,0 0 20px #aed97913; }
#order-dialog [aria-invalid=true] { border-color:#f3a38c !important; }
#order-dialog .button { background:linear-gradient(#d9f1b2,#bedc90); color:#17351b; box-shadow:0 4px #65854c,0 13px 23px #0005,inset 0 1px #fff8; }
#order-dialog .text-button { color:#d2e6bd; }
.choice-row span { border:1px solid #bad6a936; border-radius:11px; background:linear-gradient(#304d3a,#1b3225); color:#d5e8c9; box-shadow:0 4px #051509,0 7px 15px #0004; transform:translateY(-2px); transition:transform 140ms,background 140ms; }
.choice-row input:checked+span { color:#17321a; background:linear-gradient(#d6eeb1,#adc987); border-color:#e0f6bc; box-shadow:inset 0 1px #fff8,0 2px #65824d; transform:translateY(1px); }
.writing-hint,.preview-explanation { color:#c2d8b6; background:#a3c97912; border:1px solid #cee8ae1c; border-radius:12px; }
.review-card { background:#0b1e16; border:1px solid #d9f0b838; border-radius:16px; box-shadow:0 5px #030d08,inset 0 1px #cde7b724; }
.review-heading { color:#ddf0ba; border-color:#c5e2a430; }
.review-row { border-color:#c5e2a430; }
.review-row button { color:#dbecbd; }
.confirmation-details { background:#0b1e16; border-color:#d9f0b838; border-radius:16px; }
.confirmation-details dt { color:#b7cbb2; }
.confirmation-details dd { color:#f0f3e8; }
.form-error { background:#632d223d; color:#ffd3c1; border:1px solid #f3a68a45; border-radius:12px; padding:12px; }
.composer-preview { position:sticky; top:0; align-self:start; height:590px; display:flex; align-items:center; flex-direction:column; justify-content:center; overflow:hidden; padding:30px; background:radial-gradient(ellipse at 50% 40%,#79a97029,transparent 65%); perspective:1200px; }
.composer-orbit { position:absolute; width:360px; height:360px; border:1px solid #ceeab354; border-radius:50%; transform:rotateX(62deg) rotateY(15deg); box-shadow:0 1px #9abe8a36; }
.composer-orbit:nth-child(2) { transform:rotateX(62deg) rotateY(75deg); }
.gift-object { width:210px; height:244px; position:relative; transform-style:preserve-3d; transform:rotateX(10deg) rotateY(-24deg) rotateZ(-8deg); animation:gift-float 7s ease-in-out infinite; }
.gift-disc { position:absolute; width:236px; height:236px; border-radius:50%; left:71px; top:7px; transform:translateZ(-5px); background:repeating-radial-gradient(#0c140f 0 2px,#2b382c 3px,#0b150f 4px); box-shadow:3px 3px #718268,10px 12px 35px #0008; }
.gift-disc::before { content:''; position:absolute; inset:78px; border-radius:50%; background:#d5e7a9; box-shadow:0 0 0 1px #d3e6bc77; }
.gift-disc::after { content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(transparent,#d9efb030,transparent 30%,transparent 60%,#c5ecb027,transparent); }
.gift-sleeve { position:absolute; inset:0; background:linear-gradient(125deg,#eff3d9,#c4d8ac); color:#233c2a; transform:translateZ(18px); padding:21px; border:1px solid #f7ffe2; box-shadow:-6px 0 #8eaa7f,0 12px 25px #0006; display:flex; flex-direction:column; justify-content:space-between; }
.gift-sleeve small { font-size:8px; letter-spacing:.1em; }
.gift-sleeve .gift-name { font-family:var(--serif); font-size:38px; line-height:1; letter-spacing:-.04em; overflow-wrap:anywhere; max-height:145px; overflow:hidden; }
.gift-sleeve .gift-name em { display:block; }
.gift-sleeve .gift-mark { position:absolute; right:16px; top:51px; font-size:66px; opacity:.16; }
.gift-caption { margin-top:65px; text-align:center; position:relative; }
.gift-caption small { font-size:9px; color:#cce6a7; letter-spacing:.16em; }
.gift-caption p { font-family:var(--serif); font-size:31px; line-height:1.1; margin-top:12px; }
.gift-caption .gift-detail { font-family:var(--sans); font-size:10px; color:#abc6ad; margin-top:12px; }
.composer-preview[data-phase="1"] .gift-sleeve { background:linear-gradient(125deg,#e9e9d4,#bed1d1); }
.composer-preview[data-phase="2"] .gift-sleeve { background:linear-gradient(125deg,#f1dbbc,#cdab84); }
.composer-preview[data-phase="3"] .gift-sleeve { background:linear-gradient(125deg,#e5f0ca,#afce81); }
.depth-reveal { animation:depth-arrive 650ms var(--depth-ease) both; }
.depth-keyboard .depth-reveal { animation:none; }
@keyframes depth-arrive { from { opacity:.2; transform:perspective(1100px) rotateX(9deg) translate3d(0,35px,-70px); } }
@keyframes gift-float { 0%,100% { transform:rotateX(10deg) rotateY(-24deg) rotateZ(-8deg) translateY(0); } 50% { transform:rotateX(14deg) rotateY(-15deg) rotateZ(-5deg) translateY(-12px); } }
.effects-paused .gift-object,.modal-open .depth-reveal { animation-play-state:paused; }
.effects-paused .depth-reveal { animation:none; }
@media(hover:hover) and (pointer:fine) { .sample-card:hover { box-shadow:inset 0 1px #f1ffde40,5px 7px 0 #030d08,20px 35px 55px #0008; } .sample-card .cover:hover { transform:translateZ(28px); } }
@media(max-width:900px) { .dialog-shell { grid-template-columns:.62fr 1fr; } .composer-preview { padding:20px; } .gift-object { width:170px; height:210px; } .gift-disc { width:195px; height:195px; left:40px; } .gift-disc::before { inset:65px; } .gift-sleeve .gift-name { font-size:31px; } .form-shell { padding:28px; } }
@media(max-width:760px) {
  #sound-space { opacity:.62; }
  .space-haze { background:linear-gradient(90deg,#08120fd0,#08120f30); }
  .preview-banner { gap:10px; font-size:7px; padding-inline:10px; letter-spacing:.05em; }
  .effects-toggle { font-size:8px; padding-inline:9px; }
  .hero { padding-block:45px 55px; gap:40px; }
  .record-experience { border-radius:22px; padding:15px 7px; transform:perspective(900px) rotateY(-3deg) rotateX(2deg); }
  .record-stage { height:305px; }
  .hero h1 { font-size:clamp(50px,12.8vw,78px); }
  .edition-meta { padding-inline:8px; }
  .edition-picker button { padding-inline:9px; }
  .sample-card { padding:14px 14px 4px; margin-block:10px; }
  .sample-card .cover { aspect-ratio:1.12; }
  .sample-card .story { min-height:0; }
  .cover h3 { font-size:42px; }
  .steps-grid { gap:22px; }
  .steps-grid article { padding:26px; display:block; }
  .steps-grid .step-number { position:static; margin-bottom:20px; }
  .steps-grid article:nth-child(2),.steps-grid article:nth-child(3) { transform:none; }
  .how-section .section { padding-bottom:65px; }
  .price-card { transform:perspective(900px) rotateY(-3deg); }
  .faq-list details { padding-inline:16px; }
  #order-dialog { width:100%; max-width:100%; max-height:100dvh; height:100dvh; margin:0; border-radius:0; border:none; }
  .dialog-shell { display:block; }
  .dialog-header { padding:14px 19px; }
  .dialog-header .wordmark { font-size:27px; }
  .dialog-tools { gap:8px; }
  .composer-preview { position:relative; height:145px; padding:10px 20px; display:flex; flex-direction:row; gap:34px; justify-content:center; border-bottom:1px solid #bcd99d25; }
  .composer-orbit { width:260px; height:170px; left:-15px; opacity:.5; }
  .gift-object { width:89px; height:105px; flex-shrink:0; }
  .gift-disc { width:100px; height:100px; left:30px; top:2px; }
  .gift-disc::before { inset:33px; }
  .gift-sleeve { padding:9px; transform:translateZ(8px); box-shadow:-3px 0 #8eaa7f,0 10px 16px #0006; }
  .gift-sleeve small { font-size:4px; }
  .gift-sleeve .gift-name { font-size:18px; max-height:66px; }
  .gift-sleeve .gift-mark { font-size:36px; top:18px; right:5px; }
  .gift-caption { margin:0; text-align:left; max-width:155px; }
  .gift-caption small { font-size:7px; }
  .gift-caption p { font-size:23px; margin-top:7px; }
  .gift-caption .gift-detail { font-size:8px; margin-top:7px; line-height:1.5; }
  .form-shell { border:0; padding:24px 23px 36px; }
  .form-step h2 { font-size:39px; }
  .progress { margin-bottom:27px; }
  .form-intro { font-size:13px; }
  .form-meta { font-size:7px; }
  .choice-row { gap:8px; }
  .choice-row span { font-size:11px; min-height:52px; }
}
@media(prefers-reduced-motion:reduce) { .gift-object,.depth-reveal { animation:none !important; } .sample-card { transform:none; } .button,.choice-row span { transition:none; } }