:root{
  --ink:#17212b;
  --muted:#667481;
  --blue:#4f6fff;
  --coral:#ff6b64;
  --yellow:#f4c84a;
  --teal:#35c1b1;
  --violet:#a875e8;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;background:#eef3f7;color:var(--ink)}
body{min-height:100svh;overflow:hidden}
button{font:inherit;color:inherit}
#app{min-height:100svh}
.screen{position:relative;min-height:100svh;display:grid;place-items:center;padding:24px;overflow:hidden;background:radial-gradient(circle at 75% 18%,#f7fbff 0,#eef4f7 46%,#edf0f4 100%)}

.app-menu,.close{position:absolute;z-index:30;top:max(18px,env(safe-area-inset-top));width:44px;height:44px;border:1px solid rgba(23,33,43,.08);border-radius:50%;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 26px rgba(19,34,48,.11)}
.app-menu{left:max(18px,env(safe-area-inset-left));padding:0}
.close{right:max(18px,env(safe-area-inset-right));font-size:24px}
.burger{width:17px;height:12px;position:relative}.burger::before,.burger::after,.burger span{content:"";position:absolute;left:0;width:17px;height:1.5px;background:#17212b;border-radius:2px}.burger::before{top:0}.burger span{top:5px}.burger::after{top:10px}

.panel{position:relative;z-index:5;width:min(100%,570px);padding:38px 32px;border:1px solid rgba(255,255,255,.88);border-radius:32px;background:rgba(255,255,255,.74);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 22px 70px rgba(35,55,72,.10);text-align:center}
.brand-logo{display:block;width:min(265px,74%);height:auto;margin:0 auto 24px;filter:drop-shadow(0 7px 13px rgba(85,36,50,.08))}
.claim{font-size:38px;font-weight:520;line-height:1.06;letter-spacing:-.045em;margin:0 0 14px}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.primary,.secondary{border:0;border-radius:999px;padding:14px 22px;cursor:pointer;transition:transform .2s ease,background .2s ease}
.primary{background:#17212b;color:#fff;min-width:145px}.secondary{background:rgba(255,255,255,.86);border:1px solid rgba(23,33,43,.10)}
.primary:active,.secondary:active{transform:scale(.98)}

/* Cocon: dark, protected, luminous. Five clear translucent forms with independent motion. */
.cocon{background:radial-gradient(circle at 50% 92%,#33455a 0%,#202e40 37%,#141d2a 72%,#101722 100%);transition:background 1.1s ease}
.cocon::before{content:"";position:absolute;inset:auto 0 0;height:42vh;background:radial-gradient(ellipse at center bottom,rgba(255,198,116,.18),transparent 68%);pointer-events:none;z-index:0}
.cocon-scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;transition:opacity 1.05s ease,filter 1.05s ease}
.shape{position:absolute;opacity:.50;will-change:transform;transform-origin:center;filter:saturate(1.06)}
.shape-triangle{width:40vw;height:42vw;left:-7vw;top:3vh;background:var(--coral);clip-path:polygon(10% 90%,50% 3%,96% 77%);animation:triangleMove 16s ease-in-out infinite alternate}
.shape-quad{width:39vw;height:32vw;right:-3vw;top:7vh;background:var(--blue);clip-path:polygon(8% 16%,94% 3%,86% 94%,2% 79%);animation:quadMove 22s ease-in-out infinite alternate}
.shape-oval{width:31vw;height:21vw;left:38vw;top:33vh;background:var(--yellow);border-radius:50%;animation:ovalMove 18s ease-in-out infinite alternate}
.shape-pentagon{width:33vw;height:36vw;left:5vw;bottom:-6vh;background:var(--teal);clip-path:polygon(49% 0%,97% 32%,80% 94%,18% 100%,0 38%);animation:pentagonMove 25s ease-in-out infinite alternate}
.shape-softrect{width:36vw;height:28vw;right:7vw;bottom:4vh;background:var(--violet);border-radius:18% 33% 16% 27% / 27% 16% 30% 18%;animation:softrectMove 20s ease-in-out infinite alternate}
@keyframes triangleMove{to{transform:translate(34vw,18vh) rotate(23deg) scale(1.06)}}
@keyframes quadMove{to{transform:translate(-29vw,28vh) rotate(-18deg) scale(.94)}}
@keyframes ovalMove{to{transform:translate(24vw,-20vh) rotate(12deg) scale(1.15)}}
@keyframes pentagonMove{to{transform:translate(29vw,-31vh) rotate(-24deg) scale(.98)}}
@keyframes softrectMove{to{transform:translate(-31vw,-22vh) rotate(19deg) scale(1.09)}}

.cocon-card{position:relative;z-index:8;width:min(86vw,530px);padding:25px 24px;border-radius:28px;background:rgba(250,248,244,.91);border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 72px rgba(0,0,0,.23),0 0 55px rgba(255,213,151,.09);text-align:center;transform:translateY(23vh);transition:background .9s ease,box-shadow .9s ease,transform .9s cubic-bezier(.22,.75,.22,1),opacity .7s ease}
.cocon-title{font-size:29px;font-weight:470;line-height:1.13;letter-spacing:-.035em;margin:0}
.cocon-card .actions{margin-top:20px}.hint{font-size:15px;color:rgba(23,33,43,.55);margin-top:13px}

.idea-mode{background:linear-gradient(155deg,#f4f7fa 0%,#e8eef4 100%)}
.idea-mode::before{opacity:0}
.idea-mode .cocon-scene{opacity:0;filter:blur(18px)}
.idea-mode .cocon-card{transform:translateY(0);background:rgba(255,255,255,.94);box-shadow:0 22px 64px rgba(30,46,61,.11)}
.idea-view{animation:ideaIn .8s cubic-bezier(.22,.75,.22,1) both}@keyframes ideaIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.idea-text{font-size:22px;font-weight:400;line-height:1.56;letter-spacing:-.012em;margin:0 auto 24px;max-width:31rem;text-align:left;color:#26313a}
.idea-text p{margin:0 0 14px}.idea-text p:last-child{margin-bottom:0}.idea-meta{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#74818c;margin-bottom:18px}.done{font-size:31px;font-weight:470;line-height:1.18;letter-spacing:-.03em;margin:0}

.contract{max-height:86svh;overflow:auto;text-align:left;padding-bottom:34px}.contract .brand-logo{width:min(210px,56%);margin:0 0 26px}.contract h1{font-size:30px;font-weight:520;line-height:1.12;margin:0 0 20px;letter-spacing:-.035em}.contract p{font-size:17px;line-height:1.62;color:#4d5964;white-space:pre-line;margin:0}.contract .actions{justify-content:flex-start;margin-top:30px}

.settings-backdrop{position:absolute;inset:0;z-index:40;background:rgba(9,16,25,.34);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fadeIn .25s ease both}
.settings-sheet{position:absolute;z-index:41;left:16px;top:16px;bottom:16px;width:min(88vw,390px);padding:26px;border-radius:28px;background:#f9fbfc;box-shadow:0 28px 80px rgba(10,20,30,.24);overflow:auto;animation:sheetIn .32s cubic-bezier(.22,.75,.22,1) both}@keyframes fadeIn{from{opacity:0}}@keyframes sheetIn{from{opacity:0;transform:translateX(-18px)}}
.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.settings-head h2{font-size:25px;font-weight:540;letter-spacing:-.03em;margin:0}.settings-close{border:0;background:#edf1f4;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}.setting-group{margin:0 0 28px}.setting-label{font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:#77838d;margin-bottom:10px}
.sound-option{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;margin:8px 0;border:1px solid #dce3e8;border-radius:16px;background:#fff;text-align:left;cursor:pointer}.sound-option.active{border-color:#4f6fff;box-shadow:0 0 0 2px rgba(79,111,255,.10)}.sound-option b{display:block;font-weight:560}.sound-option small{display:block;color:#7b8790;margin-top:2px}.sound-dot{width:11px;height:11px;border-radius:50%;background:#c7d0d7;flex:0 0 auto}.sound-option.active .sound-dot{background:#4f6fff}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}.switch{position:relative;width:48px;height:28px;border:0;border-radius:99px;background:#cbd4da;cursor:pointer}.switch.on{background:#4f6fff}.switch::after{content:"";position:absolute;width:22px;height:22px;top:3px;left:3px;border-radius:50%;background:#fff;transition:.2s}.switch.on::after{transform:translateX(20px)}.text-action{width:100%;border:0;background:#eef2f5;border-radius:14px;padding:13px 14px;text-align:left;cursor:pointer;color:#33414d}
.about{border-top:1px solid #e2e8ed;padding-top:22px}.about h3{font-size:20px;font-weight:560;margin:0 0 9px}.about p{font-size:14px;line-height:1.55;color:#596774;margin:0 0 10px}.about>small{color:#87929b}

@media(max-width:520px){
  .panel{padding:33px 23px;border-radius:28px}.brand-logo{width:min(225px,72%);margin-bottom:21px}.claim{font-size:33px}
  .cocon-card{width:88vw;padding:23px 21px;transform:translateY(21vh)}.cocon-title{font-size:27px}.idea-text{font-size:20px;line-height:1.56}
  .shape-triangle{width:56vw;height:60vw}.shape-quad{width:58vw;height:47vw}.shape-oval{width:44vw;height:31vw}.shape-pentagon{width:47vw;height:53vw}.shape-softrect{width:52vw;height:41vw}
  .contract{padding-bottom:30px}.contract h1{font-size:28px}.contract p{font-size:16px;line-height:1.58}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}