@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#fff;background:#131615;--accent:#d4ff59}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit;border:1px solid #ffffff40;border-radius:999px;padding:10px 18px;background:#14181524;backdrop-filter:blur(8px)}button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#152006;font-weight:700}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}#creator{position:relative;min-height:100svh;overflow:hidden;padding:26px 5vw 20px;display:flex;flex-direction:column;isolation:isolate} .backdrop{position:fixed;inset:0;z-index:-2;background:#1e2522}.backdrop img,.backdrop video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(var(--zoom,1));transition:opacity .7s,transform .2s}.backdrop img{animation:drift 12s ease-in-out infinite alternate}body.typing .backdrop img,body.own-media .backdrop img{animation:none}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#03080691,transparent 75%),linear-gradient(0deg,#050908d4,transparent 80%,#05090850)}header{display:flex;justify-content:space-between;align-items:center;gap:12px}.brand{font:700 30px 'Space Grotesk',sans-serif;letter-spacing:-2px}.brand span{color:var(--accent)}nav{display:flex;align-items:center;gap:5px}nav button{font-size:12px;border:0;background:none;backdrop-filter:none;padding:8px;color:#ffffff88}nav button[aria-current=step]{color:var(--accent)}nav span{opacity:.4}#account{font-size:12px}.topline{display:flex;align-items:center;justify-content:space-between;margin-top:30px;font-size:10px;letter-spacing:2px}#countdown{font:700 38px 'Space Grotesk';letter-spacing:-2px;color:var(--accent)}.identity{width:min(650px,100%);margin-top:auto;padding-top:80px;text-shadow:0 2px 22px #0008}#prompt{font-size:13px;color:var(--accent);margin:0 0 18px}.identity-field{margin:6px 0}.identity-field input,.identity-field textarea{border:0;border-bottom:1px solid transparent;border-radius:0;color:white;background:transparent;width:100%;padding:4px 0;resize:none;outline:none;text-shadow:0 2px 18px #0009}.identity-field.active input,.identity-field.active textarea{border-bottom-color:#ffffff66}.identity-field input::placeholder,.identity-field textarea::placeholder{color:#ffffffa3}#name{font:600 clamp(38px,6vw,76px)/1.05 'Space Grotesk';letter-spacing:-2px}#specialty{font-size:clamp(19px,2.4vw,29px)}#bio{font-size:15px;line-height:1.5;max-width:520px}.facts{display:flex;gap:30px;margin-top:16px}.facts>div{flex:1;min-width:0}.facts span{font-size:9px;letter-spacing:2px;color:var(--accent)}.facts input{font-size:14px}#profileLinks{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12px}#profileLinks a{border-bottom:1px solid #ffffff66;padding-bottom:4px}.panel{width:min(620px,100%);margin-top:22px}.panel h1{font:500 24px 'Space Grotesk';margin:0 0 8px}.panel p{font-size:12px;line-height:1.5;color:#eee}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#linksPanel .link-row{display:flex;gap:8px;margin:8px 0}.link-row input,.slug input{min-width:0;border:0;border-bottom:1px solid #ffffff66;padding:10px 0;background:none;color:white}.link-row input:first-child{width:32%}.link-row input:nth-child(2){flex:1}.link-row button{padding:6px 12px}input:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}details{margin:16px 0;font-size:13px}summary{cursor:pointer;width:max-content}.settings{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding-top:14px}.settings label{display:flex;align-items:center;gap:10px;font-size:12px}select{max-width:165px;padding:7px;border:1px solid #ffffff55;background:#14181580;border-radius:6px;color:white}input[type=range]{width:110px;accent-color:var(--accent)}input[type=checkbox]{accent-color:var(--accent)}.slug{display:flex;align-items:center;font:500 23px 'Space Grotesk';gap:2px}.slug input{width:230px}.check{font-size:12px}.panel #unpublish{margin-top:12px;font-size:11px}footer{padding-top:25px;width:min(650px,100%)}#stepHint{font-size:12px;flex:1}#status{font-size:12px;min-height:18px;line-height:1.5;margin:12px 0 0;color:#f0f4e8}#draftActions{font-size:12px;margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}#draftActions button{font-size:12px;padding:6px 12px}#creator[data-stage=links] .identity,#creator[data-stage=capture] .identity{padding-top:30px}#creator[data-stage=links] #name,#creator[data-stage=capture] #name{font-size:40px}#creator[data-stage=links] .facts,#creator[data-stage=capture] .facts,#creator[data-stage=links] [data-field=bio],#creator[data-stage=capture] [data-field=bio]{display:none}#creator[data-style=electric]{--accent:#7bccff}#creator[data-style=editorial],#creator[data-style=noir]{--accent:#fff}#creator[data-style=sunset]{--accent:#ffb794}#creator[data-style=neon]{--accent:#e6a3ff}.playing .identity{animation:reveal 1s both .65s}.playing .facts{animation:reveal .7s both 2s}.playing #profileLinks{animation:reveal .6s both 3.5s}dialog{border:1px solid #ffffff33;padding:0;border-radius:20px;background:#141815;width:min(480px,95vw);max-height:95svh;overflow:hidden;color:white}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.camera-shell{position:relative;height:min(720px,88svh)}.camera-shell video,.camera-shell img{width:100%;height:100%;object-fit:cover}#cameraFeed{transform:scaleX(-1)}#faceGuide{position:absolute;top:12%;left:25%;width:50%;height:42%;border:1px dashed #ffffffaa;border-radius:50%;pointer-events:none}#closeCamera{position:absolute;top:15px;right:15px;font-size:24px}.camera-bottom{position:absolute;bottom:0;left:0;right:0;padding:28px 20px;background:linear-gradient(transparent,#000b);text-align:center}.camera-bottom .actions{justify-content:center}#cameraStatus{font-size:16px;text-shadow:0 1px 9px #000}#donePanel h1{font-size:40px}#publicUrl{display:block;margin:12px 0 22px;color:var(--accent)}@keyframes drift{to{transform:scale(1.045)}}@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@media(min-width:1000px){.backdrop img,.backdrop video{object-position:50% 35%}.identity,.panel,footer{margin-left:4vw}#creator{padding-right:6vw}.shade{background:linear-gradient(90deg,#030806c4,transparent 90%),linear-gradient(0deg,#050908aa,transparent 85%)} }@media(max-width:600px){#creator{padding:18px 22px max(15px,env(safe-area-inset-bottom))}nav{gap:0}nav button{padding:7px 5px;font-size:11px}.brand{font-size:26px}#account{max-width:58px;text-align:right}.topline{margin-top:20px}#demoLabel{font-size:8px;letter-spacing:1px}.identity{padding-top:65px}.facts{gap:18px}button{padding:10px 14px}.panel{margin-top:18px}footer{padding-top:20px}.settings{gap:12px}#creator[data-stage=preview] .identity{padding-top:30px}#publishPanel p{margin:8px 0}.slug{font-size:20px}#creator[data-stage=preview] #name{font-size:44px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

@media(min-width:900px){body:not(.own-media) .backdrop img,body:not(.own-media) .backdrop video{object-position:50% 8%!important}}

#moderationNotice{max-width:650px;margin-top:16px;padding:12px 16px;border:1px solid #ffc47c80;border-radius:12px;background:#312517cc;font-size:12px}#moderationNotice p{margin:0 0 8px;line-height:1.5}
#moreStory{display:block;margin-top:16px;font-size:12px;padding:8px 0;border:0;backdrop-filter:none;background:none;color:var(--accent)}#moreStory small{font-size:10px;color:#ffffff99;margin-left:5px}.optional-edits{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.optional-edits button{font-size:11px;padding:7px 12px}#creator[data-stage=you] [data-field=name] input,#creator[data-stage=you] [data-field=specialty] input{border-bottom-color:#ffffff55}#creator[data-stage=you] .identity{padding-top:45px}#creator[data-stage=preview] .identity{padding-top:25px}@media(max-height:740px){#creator[data-stage=preview] .topline{margin-top:8px}#creator[data-stage=preview] .identity{padding-top:10px}#creator[data-stage=preview] #name{font-size:38px}#creator[data-stage=preview] #publishPanel{margin-top:10px}#creator[data-stage=preview] footer{padding-top:8px}}
/* Match the published portrait-safe desktop composition. */
.backdrop img,.backdrop video{transform-origin:center top}
@media(min-aspect-ratio:1/1) and (min-width:700px){body.own-media .backdrop img,body.own-media .backdrop video{position:absolute;left:36%;width:64%;object-fit:contain;object-position:center top!important;transform:none;animation:none}}

#welcome{margin-top:34px;max-width:560px}#welcome h1{font-size:clamp(25px,4vw,40px);line-height:1.1;margin:0 0 10px}#welcome p{font-size:14px;line-height:1.5}#welcome .welcome-note{font-size:11px;max-width:330px;color:#eee}#creator:not([data-stage=you]) #welcome,.own-media #welcome{display:none}#creator[data-stage=you] .identity{padding-top:20px}body.typing #welcome{display:none}@media(max-height:740px){#welcome{margin-top:16px}#welcome h1{font-size:25px}.topline{margin-top:10px!important}}

#captureCue{position:absolute;inset:0;display:grid;place-items:center;font:700 150px/1 Arial;color:white;text-shadow:0 4px 25px #000;background:#0003;pointer-events:none}#captureCue[hidden],#recordingBadge[hidden],#recordingProgress[hidden]{display:none}#recordingBadge{position:absolute;top:24px;left:18px;background:#b71020;color:white;padding:12px 16px;border-radius:24px;font:bold 17px Arial;box-shadow:0 2px 12px #0005}#recordingProgress{position:absolute;bottom:0;left:0;right:0;height:8px;background:#ffffff55}#recordingProgress>div{height:100%;width:0;background:#ff334b;transition:width .15s linear}#cameraDialog.recording{outline:4px solid #ff334b;outline-offset:-4px}