:root{color-scheme:dark;--paper:#292b2d;--ink:#f0efed;--quiet:#a6a8aa;--line:#4c4e50;--accent:#b2d1fb;--ease:cubic-bezier(.16,1,.3,1);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.landing{height:100svh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto}
a{color:inherit}
.social-links{display:flex;justify-content:center;align-items:center;gap:12px;padding:0 20px max(8px,env(safe-area-inset-bottom));color:var(--quiet)}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;text-decoration:none;transition:color 180ms}
.social-links svg{display:block;width:18px;height:18px}
.social-links a:hover{color:var(--ink)}
button,input,textarea{font:inherit}
button{color:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.65}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
h1,h2,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.stage{isolation:isolate;position:relative;display:grid;place-items:center;min-height:0;padding:clamp(12px,3dvh,32px) 24px;overflow:clip}
.center{position:relative;z-index:5;width:min(440px,100%);text-align:center;animation:center-in 800ms var(--ease) both}
h1{font-size:clamp(44px,4.2vw,62px);font-weight:600;line-height:1.06;letter-spacing:-.055em;margin-bottom:34px}
h1 span{color:#b6b8ba}
.delivery-note{margin:-18px 0 28px;color:var(--quiet);font-size:13px}
#brief{width:100%;text-align:left}
.domain-field{display:flex;align-items:center;gap:12px;height:58px;padding:0 17px;border:1px solid #57595b;border-radius:12px;background:#353739;box-shadow:0 1px 0 #ffffff08,inset 0 1px 3px #0002;transition:border-color 180ms ease,box-shadow 180ms ease}
.domain-field:focus-within{border-color:#99b9e5;box-shadow:0 0 0 3px #adcfff12}
.domain-field>svg{flex:none;width:21px;height:21px;stroke:#b0b3b5;stroke-width:1.3}
.domain-field>input{margin:0;padding:0;height:100%;border:0;border-radius:0;box-shadow:none;background:none;outline:none;font-size:18px;letter-spacing:-.025em;min-width:0}
input:not([type=radio]),textarea{display:block;width:100%;padding:12px 14px;color:var(--ink);background:#323436;border:1px solid #505254;border-radius:9px;font-size:16px;font-weight:400;transition:border-color 180ms}
input::placeholder,textarea::placeholder{color:#a8aaac;opacity:1}
textarea{resize:vertical;min-height:76px}
.domain-field>input{background:none;border:0;padding:0;font-size:18px}
.link-reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-6px);transition:grid-template-rows 380ms var(--ease),opacity 250ms,transform 380ms var(--ease)}
.link-reveal.is-open{grid-template-rows:1fr;opacity:1;transform:none}
.link-reveal-inner{overflow:hidden;min-height:0;text-align:center;padding-inline:4px;margin-inline:-4px}
.link-reveal textarea{margin-top:10px;text-align:left;min-height:73px}
.hint{font-size:12px;font-weight:400;color:var(--quiet);line-height:1.5}
#links-hint{margin-top:7px;text-align:left;padding-left:2px}
.primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:43px;padding:0 22px 1px;border-radius:999px;border:1px solid #3b4b78;color:#121c2d;background:linear-gradient(180deg,#edf4ff 0%,#d6e7ff 18%,#a2c7ff 50%,#99cbf8 80%,#a2d2f7 100%);box-shadow:0 8px 22px #0003,inset 0 1px 0 #fff9;text-shadow:0 1px 1px #ffffffb3;font-size:16px;font-weight:500;letter-spacing:-.025em;overflow:hidden;transition:transform 250ms var(--ease),box-shadow 250ms var(--ease)}
.primary::before,.primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.primary::before{box-shadow:inset 0 -15px 2px -12px #ffffff40;mix-blend-mode:screen}
.primary::after{box-shadow:inset 0 -8px 0 4px #b3b3b3;mix-blend-mode:color-burn}
.primary .gloss{position:absolute;z-index:1;top:3px;left:12px;right:12px;height:12px;border-radius:999px;pointer-events:none;background:linear-gradient(#ffffffed,#ffffff19);filter:blur(.3px)}
.primary>span:not(.gloss),.primary>svg{position:relative;z-index:2}
.primary>svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.primary:hover{transform:translateY(-2px);box-shadow:0 12px 25px #0004,inset 0 1px 0 #fff9}
.primary:active{transform:translateY(1px)}
#continue{margin:19px auto 8px}
.film-field{position:absolute;inset:12px 0;max-width:1800px;margin-inline:auto;pointer-events:none;z-index:1}
.film-slot{position:absolute;pointer-events:auto;width:min(21vw,34dvh,330px);transform:rotate(var(--tilt));animation:scatter 1100ms var(--ease) backwards;animation-delay:var(--delay);transition:opacity 300ms}
.film-slot:nth-child(1){left:6%;top:7%;--tilt:-7deg;--from-x:100px;--from-y:110px;--delay:40ms}
.film-slot:nth-child(2){right:7%;top:9%;--tilt:6deg;--from-x:-100px;--from-y:100px;--delay:120ms;width:min(19vw,32dvh,310px)}
.film-slot:nth-child(3){left:1%;top:42%;--tilt:5deg;--from-x:150px;--from-y:0px;--delay:200ms;width:min(23vw,36dvh,360px)}
.film-slot:nth-child(4){right:1%;top:45%;--tilt:-6deg;--from-x:-150px;--from-y:0px;--delay:280ms;width:min(22vw,35dvh,350px)}
.film-slot:nth-child(5){left:19%;bottom:5%;--tilt:-4deg;--from-x:70px;--from-y:-120px;--delay:360ms;width:min(19vw,31dvh,300px)}
.film-slot:nth-child(6){right:17%;bottom:3%;--tilt:5deg;--from-x:-70px;--from-y:-120px;--delay:440ms;width:min(20vw,33dvh,320px)}
.film-slot:nth-child(7){left:42%;top:0;--tilt:-3deg;--from-x:0px;--from-y:100px;--delay:520ms;width:min(17vw,26dvh,245px)}
.film-slot:hover,.film-slot:focus-within{z-index:8}
.film-window{display:block;width:100%;padding:0 5px 5px;border:1px solid #acadae;border-radius:9px;background:linear-gradient(110deg,#afb0b2,#dadbdd 47%,#a2a4a6);color:#353638;box-shadow:0 12px 32px #0005,inset 0 1px 0 #fffb;overflow:hidden;text-align:left;transition:transform 500ms var(--ease),box-shadow 400ms var(--ease)}
.window-bar{position:relative;display:flex;align-items:center;justify-content:center;height:28px;padding:0 30px 0 44px;gap:7px}
.lights{display:flex;gap:4px;flex-shrink:0}
.window-bar .lights{position:absolute;left:4px;top:9px}
.lights i{display:block;width:9px;height:9px;border-radius:50%;border:1px solid #ac554e;background:radial-gradient(ellipse at 50% 14%,#fff6e5 0%,#ffaea1 20%,#ec675d 60%,#db574d 100%);box-shadow:0 1px 0 #fff9}
.lights i:nth-child(2){border-color:#b68829;background:radial-gradient(ellipse at 50% 14%,#ffffed,#ffe6a2 20%,#f4bc43 60%,#e6a624)}
.lights i:nth-child(3){border-color:#529346;background:radial-gradient(ellipse at 50% 14%,#eeffdd,#b9e79a 20%,#70bd61 60%,#58a84c)}
.file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;letter-spacing:-.01em;text-shadow:0 1px #fff7}
.window-close{position:absolute;right:4px;top:1px;font-size:19px;font-weight:300;color:#6668}
.film-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#202123;box-shadow:0 0 0 1px #0002}
.film-frame video{display:block;width:100%;height:100%;object-fit:contain}
.play-badge{position:absolute;display:grid;place-items:center;inset:0;margin:auto;width:35px;height:35px;border:1px solid #fff5;border-radius:50%;background:#16171995;color:#fff;font-size:11px;padding-left:2px;opacity:0;transition:opacity 200ms}
.film-window:focus-visible .play-badge{opacity:1}
#film-status{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--quiet);font-size:12px}
#film-status:empty,#form-status:empty{display:none}
.details-step,.form-panel{display:flex;flex-direction:column;gap:16px;animation:details-in 400ms var(--ease) both}
.options-next{align-self:center;margin-top:4px}
.music-field .hint{margin-top:6px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend,.field-label{font-size:13px;font-weight:500}
legend{margin-bottom:8px;padding:0;color:#d1d3d4}
.field-label>input,.field-label>textarea{margin-top:7px}
.optional{margin-left:5px;color:var(--quiet);font-weight:400;font-size:12px}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.formats label,.pills label{position:relative}
input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;top:50%;left:50%}
.choice{display:flex;border:1px solid #4e5052;border-radius:8px;background:#303234;color:#babdbf;cursor:pointer;transition:background 180ms,border-color 180ms,color 180ms}
input:checked+.choice{background:#414951;border-color:#a7bfd9;color:#f0f5fc;box-shadow:inset 0 1px 0 #ffffff0d}
input:focus-visible+.choice{outline:2px solid var(--accent);outline-offset:3px}
.choice:hover{border-color:#9da7b0}
.format-option .choice{min-height:94px;padding:10px 4px;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px}
.format-option small{font-size:10px;font-weight:400;color:#b0b5ba}
.shape{display:block;border:1.5px solid currentColor;border-radius:2px;margin-bottom:5px}
.landscape{width:29px;height:17px}
.portrait{width:14px;height:25px}
.square{width:21px;height:21px}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills .choice{padding:7px 11px;font-size:12px;font-weight:400}
.story-hint{margin-left:8px}
.story-picker{position:relative;padding-bottom:8px;margin-bottom:-8px}
.story-tooltip{position:absolute;top:100%;left:0;z-index:10;width:min(340px,100%);padding:12px 14px;border:1px solid #62676c;border-radius:9px;background:#363a3e;color:#ebedef;box-shadow:0 8px 25px #0004;font-size:13px;line-height:1.5;animation:details-in 140ms var(--ease)}
@media(hover:none){.story-tooltip{top:auto;bottom:calc(100% + 8px);width:100%}}
.custom-direction{display:block;margin-top:10px}
.back{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%;padding:7px 0;background:none;border:0;color:#c9cdd1;font-size:13px}
.back:hover{color:var(--ink)}
#back{align-self:center;padding-block:4px}
#product-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.submit-row{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:4px}
#form-status{text-align:center;margin-top:17px;font-size:14px}
#start-over{margin:20px auto 0}
.success{color:#c8dfc9}
.error{color:#ffb6a6}
.stage.is-detail h1{font-size:clamp(28px,4dvh,42px);margin-bottom:24px}
.stage.is-detail .film-field,.stage:has(.link-reveal.is-open) .film-field{opacity:.2;transition:opacity 350ms}
.stage.is-detail:has(.film-slot:hover) .film-field{opacity:1}
dialog{width:min(1040px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0 6px 6px;border:1px solid #a7a8aa;border-radius:10px;background:linear-gradient(110deg,#b5b6b8,#e2e3e4,#a8aaac);color:#303234;box-shadow:0 24px 100px #0008}
dialog[open]{animation:details-in 300ms var(--ease)}
dialog::backdrop{background:#18191bd9;backdrop-filter:blur(6px)}
dialog header{display:flex;align-items:center;gap:14px;padding:0 8px;height:38px}
dialog h2{font-size:12px;font-weight:500;margin-inline:auto;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog button{width:32px;height:32px;padding:0;border:0;background:none;font-size:26px;color:#555}
dialog video{display:block;width:100%;max-height:calc(100dvh - 100px);background:#202123;border-radius:4px}
.inbox{width:min(740px,calc(100% - 32px));margin:40px auto}
.inbox h1{font-size:42px;margin:18px 0 27px}
.inbox-item{border-top:1px solid var(--line);padding:15px 0;overflow-wrap:anywhere}
.inbox-item h2{font-size:18px}
.inbox-item p,.inbox-item time{font-size:14px;color:var(--quiet)}
.inbox-item .brief-note{white-space:pre-wrap;margin:8px 0;color:var(--ink)}
@keyframes scatter{from{opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(0) scale(.78)}to{opacity:1;transform:rotate(var(--tilt))}}
@keyframes center-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes details-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
  .film-window:hover{transform:scale(1.16) rotate(calc(-1 * var(--tilt)));box-shadow:0 22px 55px #0008}
  .film-field:has(.film-slot:hover) .film-slot:not(:hover){opacity:.45}
}
@media(min-width:651px){
  .stage.is-detail .film-slot:nth-child(5){left:4%}
  .stage.is-detail .film-slot:nth-child(6){right:4%}
}
@media(max-width:1050px){
  .center{width:min(410px,100%)}
  .film-slot:nth-child(1){left:4%;top:5%;width:min(24vw,30dvh,210px)}
  .film-slot:nth-child(2){right:5%;top:4%;width:min(23vw,28dvh,195px)}
  .film-slot:nth-child(3){left:1%;top:45%;width:min(19vw,30dvh,215px)}
  .film-slot:nth-child(4){right:1%;top:43%;width:min(19vw,30dvh,215px)}
  .film-slot:nth-child(5){left:12%;bottom:4%;width:min(24vw,28dvh,200px)}
  .film-slot:nth-child(6){right:12%;bottom:3%;width:min(24vw,30dvh,210px)}
  .film-slot:nth-child(7){left:40%;top:0;width:min(20vw,24dvh,165px)}
}
@media(max-width:650px){
  .stage{padding-inline:20px}
  .center{width:min(380px,100%)}
  h1{font-size:clamp(34px,8.5vw,43px);margin-bottom:26px}
  .domain-field{height:54px}
  .film-slot:nth-child(1){left:4%;top:7%;width:min(31vw,22dvh,150px)}
  .film-slot:nth-child(2){right:4%;top:9%;width:min(29vw,21dvh,142px)}
  .film-slot:nth-child(3){left:36%;top:1%;width:min(27vw,20dvh,137px)}
  .film-slot:nth-child(4){left:3%;right:auto;top:auto;bottom:8%;width:min(30vw,21dvh,145px)}
  .film-slot:nth-child(5){left:auto;right:3%;bottom:11%;width:min(32vw,23dvh,155px)}
  .film-slot:nth-child(6){left:35%;right:auto;bottom:1%;width:min(27vw,20dvh,135px)}
  .film-slot:nth-child(7){left:37%;right:auto;top:18%;bottom:auto;width:min(26vw,20dvh,137px)}
  .window-bar{height:22px;padding:0 17px 0 33px}
  .window-bar .lights{top:7px;left:2px;gap:3px}
  .window-bar .lights i{width:6px;height:6px}
  .file-name{font-size:8px}
  .window-close{font-size:16px;top:-1px;right:2px}
  .film-window{padding:0 3px 3px;border-radius:6px}
  .details-step,.form-panel{gap:12px}
  .format-option .choice{min-height:78px}
  .stage.is-detail h1{font-size:clamp(27px,4.5dvh,36px)}
}
@media(max-height:680px){
  .stage{padding-block:12px}
  .stage.is-detail h1{font-size:27px;margin-bottom:18px}
  .stage.is-detail .delivery-note{margin:-10px 0 10px}
  .details-step,.form-panel{gap:8px}
  .format-option .choice{min-height:66px;padding-block:6px}
  .shape{margin-bottom:2px}
  .pills .choice{padding:6px 9px}
  .submit-row{gap:6px;margin-top:0}
  textarea{min-height:64px}
  #delivery-options textarea{height:64px}
  #delivery-options input{padding-block:10px}
  #form-status.error{font-size:12px;line-height:1.4;margin-top:2px}
}
@media(min-width:651px) and (max-height:680px){
  .stage.is-detail .center{width:min(700px,100%)}
  .form-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:20px}
  .options-next,.submit-row{grid-column:1/-1;justify-self:center}
  #delivery-options>.field-label:has(textarea){grid-column:2;grid-row:1/3}
  .stage.is-detail h1{font-size:26px;margin-bottom:14px}
  .stage.is-detail .delivery-note{margin:-6px 0 6px}
}
@media(max-height:480px){
  h1{font-size:26px;margin-bottom:18px}
  .delivery-note{margin:-10px 0 12px}
  .domain-field{height:46px}
  .link-reveal textarea{margin-top:8px;min-height:64px;height:64px}
  #continue{margin:12px auto 4px}
}
@media(min-width:651px) and (max-height:480px){
  .stage.is-detail .center{display:grid;grid-template-columns:135px minmax(0,1fr);column-gap:24px;text-align:left}
  .stage.is-detail h1{grid-column:1;grid-row:1;align-self:end;margin:0 0 12px}
  .stage.is-detail .delivery-note{grid-column:1;grid-row:2;align-self:start;margin:0}
  .stage.is-detail #brief{grid-column:2;grid-row:1/3}
  .details-step,.form-panel{gap:6px}
  .social-links{padding-bottom:max(4px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .film-window:hover{transform:none}
}