:root{--ink:#f8f4ff;--muted:#c5bdd8;--violet:#a98cff;--rose:#ff9fbd;--gold:#ffd17b;--night:#080719;--glass:rgba(11,8,29,.78);--line:rgba(221,208,255,.22)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;min-height:100%;background:var(--night);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;overflow-x:hidden}button,input{font:inherit}button{color:inherit}body{min-height:100svh}
#stars,.scene-bg,.scene-wash,.paper-drift{position:fixed;inset:0}.scene-bg{background:url("assets/atelier/atelier-cover-v1.png") center/cover no-repeat;transform:scale(1.025);transition:opacity .8s ease,filter .8s ease,background-image .8s ease;z-index:0}.scene-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,20,.28),transparent 48%,rgba(5,4,20,.18))}.scene-wash{z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,3,14,.12),rgba(4,3,14,.03) 46%,rgba(5,3,18,.62) 100%),radial-gradient(circle at 50% 20%,transparent,rgba(5,3,18,.26) 76%)}#stars{z-index:2;pointer-events:none;opacity:.55}.paper-drift{z-index:3;pointer-events:none;overflow:hidden}.paper{position:absolute;width:18px;height:25px;border:1px solid #f7d8a766;background:#fff4d21a;animation:drift var(--d,13s) linear infinite;transform:rotate(var(--r,10deg))}@keyframes drift{from{translate:0 -12vh;rotate:0deg}to{translate:var(--x,80px) 118vh;rotate:540deg}}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px clamp(14px,3vw,34px);background:linear-gradient(#050414cc,transparent);pointer-events:none}.topbar>*{pointer-events:auto}.home,.icon-btn{border:1px solid var(--line);background:#0b0924a8;backdrop-filter:blur(12px);color:var(--ink);text-decoration:none;border-radius:999px;min-height:42px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}.home{font-weight:800}.mini-title{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;letter-spacing:.08em}.mini-title i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 18px var(--gold)}.top-actions{display:flex;gap:8px}.icon-btn{font-size:12px;font-weight:800}.icon-btn:not(.active){opacity:.6}
main{position:relative;z-index:5;min-height:100svh;display:grid;align-items:end;padding:88px clamp(16px,5vw,74px) 32px}.hidden{display:none!important}.start-screen{width:min(760px,100%);padding:clamp(22px,4vw,42px);background:linear-gradient(135deg,rgba(10,8,31,.9),rgba(20,12,48,.56));border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(15px);box-shadow:0 26px 90px #000b;animation:rise .8s ease both}.eyebrow{color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.22em}.start-screen h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(48px,9vw,94px);line-height:.78;margin:18px 0 23px;font-weight:500;text-shadow:0 8px 35px #000}.start-screen h1 span,.start-screen h1 em{display:block}.start-screen h1 em{color:var(--rose);font-weight:400;font-size:.75em;margin-left:clamp(18px,8vw,90px)}.lead{max-width:650px;color:#e3ddef;font-size:clamp(16px,2vw,20px);line-height:1.6}.setup{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,220px);gap:10px;align-items:end;margin-top:24px}.setup label{grid-column:1/-1;color:var(--muted);font-size:13px}.setup input{height:52px;border:1px solid var(--line);border-radius:14px;background:#08061cd4;color:white;padding:0 16px;outline:none}.setup input:focus{border-color:var(--violet);box-shadow:0 0 0 3px #a98cff22}.start-actions{display:flex;gap:8px}.primary,.secondary,.continue,.choice,.action-btn{border:0;border-radius:14px;padding:14px 18px;font-weight:900;cursor:pointer;transition:.2s transform,.2s filter}.primary,.continue{background:linear-gradient(115deg,var(--gold),#ff9dbd 52%,#aa91ff);color:#171027;box-shadow:0 9px 30px #ff9fbd30}.primary{display:flex;justify-content:space-between;gap:20px;align-items:center}.primary:hover,.continue:hover,.choice:hover,.action-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.secondary{border:1px solid var(--line);background:#0b0926cc}.story-facts{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:12px}.story-facts b{color:#efe9fa}.sketch-link{margin-top:20px;border:0;background:none;color:#d8ccf2;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.story-screen{width:100%;margin:0}.chapter-row{width:min(680px,100%);display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:12px;text-shadow:0 2px 9px #000;transition:.25s opacity}.chapter-row>div:first-child{display:flex;flex-direction:column}.chapter-row span{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:900}.chapter-row b{font-family:Georgia,serif;font-size:clamp(22px,3vw,34px);font-weight:500}.progress-wrap{width:min(230px,38vw);text-align:right}.progress{height:5px;margin-top:7px;border-radius:10px;background:#ffffff21;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),var(--gold));box-shadow:0 0 12px var(--rose);transition:.5s width}.story-card{position:relative;width:min(680px,100%);min-height:0;background:linear-gradient(145deg,rgba(8,6,25,.9),rgba(20,11,47,.72));border:1px solid var(--line);border-radius:22px;padding:clamp(20px,3vw,30px);backdrop-filter:blur(13px);box-shadow:0 22px 65px #000b;overflow:hidden;transition:.3s width,.3s padding,.3s background,.3s box-shadow}.story-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,#ffffff0c,transparent 30%)}.art-toggle{position:absolute;z-index:3;right:14px;top:13px;border:1px solid #f2ddff42;border-radius:999px;background:#16102fd9;color:#f7eefe;padding:8px 12px;font-size:11px;font-weight:900;cursor:pointer}.art-toggle:hover{border-color:var(--gold)}.speaker{position:relative;max-width:calc(100% - 125px);color:var(--rose);font-size:11px;font-weight:900;letter-spacing:.18em}.story-card h2{position:relative;font-family:Georgia,serif;font-weight:500;font-size:clamp(26px,3.5vw,39px);margin:8px 0 11px}.story-text{position:relative;max-height:min(190px,25vh);overflow:auto;padding-right:8px;color:#e7e0ef;font-family:Georgia,"Times New Roman",serif;font-size:clamp(16px,1.8vw,19px);line-height:1.58;scrollbar-color:#a98cff55 transparent}.story-text p{margin:0}.story-text::first-letter{font-size:1.6em;color:var(--gold)}.interaction{position:relative;margin-top:18px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice,.action-btn{min-height:58px;border:1px solid #d8c8ff2c;background:linear-gradient(135deg,#241844e8,#120d2ee8);text-align:left}.choice small{display:block;color:var(--muted);font-weight:500;margin-top:4px}.story-nav{position:relative;display:flex;justify-content:flex-end;gap:10px;margin-top:18px}.back-scene{margin-right:auto;width:48px;border:1px solid var(--line);border-radius:14px;background:#0b0826;cursor:pointer}.back-scene:disabled{opacity:.2}.continue{display:flex;gap:18px;align-items:center}.hint{width:min(680px,100%);text-align:center;color:#aaa0bd;font-size:11px;margin-top:9px;transition:.25s opacity}.story-screen.art-focus .chapter-row,.story-screen.art-focus .hint{opacity:0;pointer-events:none}.story-screen.art-focus .story-card{width:max-content;margin-left:auto;padding:0;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;overflow:visible}.story-screen.art-focus .story-card>*:not(.art-toggle),.story-screen.art-focus .story-card::before{display:none}.story-screen.art-focus .art-toggle{position:static;min-height:48px;padding:0 18px;background:#0c0924d9;border-color:#ffe4ae70;box-shadow:0 10px 30px #0009;font-size:13px}.toast{position:fixed;z-index:60;left:50%;top:16%;transform:translate(-50%,-20px);opacity:0;pointer-events:none;background:#120d30e8;border:1px solid var(--line);padding:11px 18px;border-radius:999px;transition:.25s;color:var(--gold);font-weight:800}.toast.show{opacity:1;transform:translate(-50%,0)}
.fragment-field,.shadow-field{position:relative;height:170px;border:1px dashed #d8c8ff36;border-radius:18px;overflow:hidden;background:#05041577}.fragment,.shadow-mark{position:absolute;border:0;cursor:pointer;display:grid;place-items:center;animation:float 2.4s ease-in-out infinite}.fragment{width:48px;height:58px;background:#f8e8c61f;border:1px solid #ffe7a57d;color:var(--gold);font-size:20px;clip-path:polygon(8% 0,100% 5%,91% 100%,0 90%)}.fragment.found{animation:vanish .45s forwards}.shadow-mark{width:47px;height:47px;border-radius:50%;background:radial-gradient(circle,#d098ffb8,#4a177500 70%);font-size:19px}.shadow-mark.found{animation:vanish .35s forwards}@keyframes float{50%{translate:0 -8px;rotate:4deg}}@keyframes vanish{to{opacity:0;scale:1.8;filter:blur(8px)}}.action-status{text-align:center;margin-top:9px;color:var(--gold);font-weight:800}.sequence{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.sequence-preview{letter-spacing:.35em;text-align:center;font-size:28px;margin:8px 0 16px;color:var(--gold)}.sequence .action-btn{min-width:70px;text-align:center;font-size:23px}.hold-wrap{text-align:center}.hold-button{--hold:0%;position:relative;width:min(330px,100%);height:72px;border:1px solid #ffd9a5a0;border-radius:999px;overflow:hidden;background:#0c0927;color:white;font-weight:900;cursor:pointer}.hold-button::before{content:"";position:absolute;inset:0;width:var(--hold);background:linear-gradient(90deg,#8d6fff,#ff9bb8,#ffd17b);transition:.08s width}.hold-button span{position:relative}.hold-orb{width:55px;height:55px;margin:14px auto;border-radius:50%;background:#ffd68c;box-shadow:0 0 20px #ffd17b,0 0 70px #ff9fbd;animation:pulse 1.3s infinite}@keyframes pulse{50%{scale:1.08;box-shadow:0 0 30px #ffd17b,0 0 100px #aa8cff}}
.ending-screen{width:min(700px,100%);margin:auto;text-align:center;padding:clamp(28px,6vw,60px);background:#09061edb;border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(18px);box-shadow:0 25px 100px #000;position:relative;overflow:hidden}.ending-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:#ffd17b33;filter:blur(60px);left:50%;top:-180px;translate:-50%}.ending-screen>*:not(.ending-glow){position:relative}.ending-screen h2{font:500 clamp(38px,7vw,72px)/.95 Georgia,serif;margin:15px 0;color:var(--gold)}.ending-screen p{font:18px/1.7 Georgia,serif;color:#e4ddec}.trait-card{display:inline-flex;flex-direction:column;border:1px solid var(--line);padding:12px 24px;border-radius:15px;margin:12px}.trait-card span{font-size:10px;letter-spacing:.15em;color:var(--muted)}.trait-card b{font-size:23px;color:var(--rose)}.ending-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.sketch-modal{position:fixed;z-index:100;inset:0;background:#05030ff2;display:grid;grid-template-columns:minmax(230px,420px) minmax(300px,760px);align-items:center;justify-content:center;gap:clamp(25px,5vw,70px);padding:70px clamp(20px,6vw,90px)}.sketch-modal .close{position:absolute;right:25px;top:20px;width:50px;height:50px;border:1px solid var(--line);border-radius:50%;background:#ffffff0c;font-size:28px;cursor:pointer}.sketch-copy span{font-size:11px;letter-spacing:.2em;color:var(--gold)}.sketch-copy h2{font:500 clamp(35px,6vw,65px)/1 Georgia,serif;margin:14px 0}.sketch-copy p{color:var(--muted);line-height:1.6}.photo-frame{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid #e6d8ff38;background:#130d28;padding:12px;transform:rotate(1.5deg);box-shadow:0 25px 80px #000}.photo-frame img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:cover;border-radius:4px}
@keyframes rise{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}@media(max-width:760px){.mini-title{display:none}.icon-btn span{display:none}.topbar{padding:10px}.home span{display:none}main{padding:74px 12px 14px}.start-screen{border-radius:20px}.setup{grid-template-columns:1fr}.setup input,.start-actions{grid-column:1}.start-actions{flex-direction:column}.story-facts{gap:9px}.chapter-row{align-items:center}.chapter-row b{font-size:20px}.progress-wrap{width:120px}.story-card{padding:19px;border-radius:18px}.art-toggle span{display:none}.speaker{max-width:calc(100% - 54px)}.choices{grid-template-columns:1fr}.story-text{max-height:27vh;font-size:16px}.interaction{margin-top:14px}.story-nav{margin-top:15px}.sketch-modal{grid-template-columns:1fr;overflow:auto;padding-top:85px}.sketch-copy{text-align:center}.ending-actions{flex-direction:column}.ending-actions button{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.paper-drift{display:none}}