:root {
  --ink: #151d37;
  --blue: #315ce8;
  --paper: #f7f5ef;
  --coral: #ff735e;
  --lime: #d9f36c;
  --line: rgba(21, 29, 55, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.topbar, main, footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--ink); text-decoration: none; font-size: 1.3rem; letter-spacing: -.06em; }
.brand span { font-weight: 800; }.brand b { color: var(--blue); font-weight: 900; }
nav { display: flex; gap: 30px; }
nav a { color: var(--ink); text-decoration: none; font-size: .95rem; position: relative; }
nav a::after { content:""; position:absolute; left:0; bottom:-7px; width:100%; height:2px; background:var(--coral); transform:scaleX(0); transition:.2s; }
nav a:hover::after { transform:scaleX(1); }

.hero { min-height: calc(100vh - 92px); display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap: 48px; padding: 48px 0 80px; }
.eyebrow, .section-no { font-size:.75rem; font-weight:800; letter-spacing:.16em; color:var(--blue); }
h1 { font-size:clamp(4rem, 8vw, 7.8rem); line-height:.86; margin:18px 0 32px; letter-spacing:-.09em; }
h1 em { color:var(--blue); font-style:normal; display:inline-block; transform:rotate(-2deg); }
.intro { max-width: 520px; font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height:1.8; }
.actions { margin-top:38px; display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.actions a, .actions button { min-height:52px; border-radius:999px; padding:0 22px; font:inherit; font-weight:750; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.actions a:hover, .actions button:hover { transform:translateY(-3px); }
.primary { display:inline-flex; gap:12px; align-items:center; text-decoration:none; color:white; background:var(--ink); box-shadow:0 10px 0 rgba(21,29,55,.12); }
.wave { background:transparent; border:1px solid var(--line); color:var(--ink); }

.playground { position:relative; min-height:620px; display:grid; place-items:center; isolation:isolate; cursor:crosshair; perspective:900px; overflow:hidden; border-radius:42px; }
.playground::before { content:""; position:absolute; width:min(540px, 92%); aspect-ratio:1; border-radius:48% 52% 58% 42% / 45% 42% 58% 55%; background:var(--lime); transform:rotate(8deg); z-index:-2; animation:morph 9s ease-in-out infinite alternate; }
.playground::after { content:""; position:absolute; width:62%; height:22%; bottom:14%; border:1px solid var(--ink); border-radius:50%; z-index:-3; transform:rotate(-4deg); }
.character-button { border:0; padding:0; background:transparent; cursor:pointer; position:relative; width:min(470px, 76vw); transition:transform .12s ease-out; transform:translate3d(var(--tx,0),var(--ty,0),35px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rot,0deg)); transform-style:preserve-3d; will-change:transform; }
.character-inner{display:block;transform:translateY(var(--bob,0));transition:transform .2s ease-out}.character-button img { display:block; width:100%; height:auto; filter:drop-shadow(var(--shadow-x,0) 22px 16px rgba(21,29,55,.2)); transition:filter .15s ease-out; }
.character-button:hover .character-inner { transform:translateY(calc(var(--bob,0) - 7px)) scale(1.015); }
.character-button.bounce .character-inner { animation:bounce .65s cubic-bezier(.2,.9,.3,1); }
.shadow { position:absolute; left:26%; right:26%; bottom:3%; height:7%; border-radius:50%; background:rgba(21,29,55,.18); filter:blur(5px); z-index:-1; }
.speech { position:absolute; top:12%; right:3%; max-width:190px; background:white; border:1px solid var(--ink); border-radius:18px 18px 18px 4px; padding:13px 17px; font-size:.9rem; font-weight:700; box-shadow:6px 6px 0 var(--coral); transform:rotate(2deg); transition:.25s; }
.speech.pop { transform:rotate(-2deg) scale(1.08); }
.hint { position:absolute; bottom:5%; margin:0; font-size:.8rem; opacity:.55; }
.spark { position:absolute; font-size:2rem; color:var(--blue); animation:float 3s ease-in-out infinite; translate:var(--sx,0) var(--sy,0); transition:translate .18s ease-out; }.s1{left:8%;top:22%;}.s2{right:12%;bottom:22%;color:var(--coral);animation-delay:-1.3s;}
.orbit { position:absolute; border:1px dashed rgba(21,29,55,.25); border-radius:50%; z-index:-1; translate:var(--ox,0) var(--oy,0); transition:translate .22s ease-out; }.orbit-one{width:80%;height:68%;transform:rotate(14deg)}.orbit-two{width:58%;height:84%;transform:rotate(-24deg)}
.rays{position:absolute;inset:13%;z-index:-1;opacity:.42;transform:translate(var(--ray-x,0),var(--ray-y,0)) rotate(var(--ray-r,0deg));transition:transform .2s ease-out;background:repeating-conic-gradient(from 4deg,transparent 0deg 12deg,rgba(49,92,232,.22) 12deg 13deg,transparent 13deg 22deg);mask:radial-gradient(circle,transparent 0 22%,#000 23% 67%,transparent 68%)}
.scene-cloud{position:absolute;z-index:-1;width:150px;height:48px;border-radius:999px;background:rgba(255,255,255,.72);filter:drop-shadow(0 9px 10px rgba(21,29,55,.07));transform:translate(var(--cloud-x,0),var(--cloud-y,0));transition:transform .28s ease-out}.scene-cloud:before,.scene-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.scene-cloud:before{width:72px;height:72px;left:24px;bottom:0}.scene-cloud:after{width:58px;height:58px;right:22px;bottom:0}.cloud-a{left:-4%;top:23%;transform:translate(var(--cloud-x,0),var(--cloud-y,0)) scale(.78)}.cloud-b{right:-2%;bottom:18%;transform:translate(var(--cloud-x,0),var(--cloud-y,0)) scale(.58)}
.scene-object{position:absolute;display:grid;place-items:center;width:54px;height:54px;border:1.5px solid var(--ink);border-radius:18px;background:#fff;color:var(--ink);font-size:1.65rem;box-shadow:5px 6px 0 rgba(21,29,55,.12);z-index:1;transform:translate3d(var(--obj-x,0),var(--obj-y,0),45px) rotate(var(--base-r,0deg));transition:transform .1s ease-out;animation:objectFloat 4s ease-in-out infinite;will-change:transform}.camera{left:11%;bottom:17%;background:#ffd971;--base-r:-9deg}.notebook{right:9%;top:24%;background:#fff;color:var(--blue);--base-r:7deg;animation-delay:-1.3s}.flower{left:17%;top:14%;width:42px;height:42px;border-radius:50%;background:var(--coral);color:#fff;animation-delay:-2s}.heart{right:17%;bottom:13%;width:44px;height:44px;border-radius:50%;color:var(--coral);animation-delay:-.5s}.pencil{right:4%;top:48%;width:42px;height:42px;border-radius:50%;background:var(--lime);--base-r:14deg;animation-delay:-2.8s}

.about { border-block:1px solid var(--line); padding:96px 0; display:grid; grid-template-columns:140px 1fr; }
.about h2, .things h2 { font-size:clamp(2.2rem,5vw,4.8rem); letter-spacing:-.06em; margin:0 0 22px; }
.about div { max-width:760px; }.about div p { font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.7; margin:0; }
.things { padding:100px 0 130px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.section-heading { grid-column:1/-1; margin-bottom:28px; }
.project-card,.coming-card { min-height:270px; border:1px solid var(--ink); border-radius:28px; padding:34px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; color:var(--ink); transition:.25s; position:relative; overflow:hidden; }
.project-card { background:var(--blue); color:white; flex-direction:row; align-items:flex-end; }
.project-card:hover { transform:translateY(-8px) rotate(-1deg); box-shadow:12px 12px 0 var(--ink); }
.project-card b { font-size:3rem; transition:.25s; }.project-card:hover b{transform:translate(6px,-6px)}
.coming-card { background:var(--coral); transform:rotate(1deg); }.coming-card:hover{transform:rotate(0deg) translateY(-5px)}
.project-card p,.coming-card p { font-size:.72rem; font-weight:800; letter-spacing:.14em; }
.project-card h3,.coming-card h3 { font-size:2.2rem; margin:8px 0; letter-spacing:-.04em; }
.project-card span,.coming-card span { line-height:1.6; }
footer { border-top:1px solid var(--line); padding:28px 0 40px; display:flex; justify-content:space-between; font-size:.85rem; }footer a{color:var(--blue);text-decoration:none;font-weight:750;border-bottom:1px solid rgba(49,92,232,.32)}footer a:hover{color:var(--coral);border-color:var(--coral)}

@keyframes morph { to { border-radius:58% 42% 40% 60% / 56% 62% 38% 44%; transform:rotate(-5deg) scale(1.03); } }
@keyframes float { 50% { transform:translateY(-14px) rotate(12deg); } }
@keyframes bounce { 35%{transform:translateY(-28px) rotate(-4deg)} 70%{transform:translateY(3px) rotate(2deg)} }
@keyframes objectFloat{50%{margin-top:-10px}}

@media (max-width:780px){
  .topbar,main,footer{width:min(100% - 28px, 680px)} .topbar{height:72px} nav{gap:16px} nav a:first-child{display:none}
  .hero{grid-template-columns:1fr;padding-top:36px;gap:12px}.copy{text-align:center}.intro{margin-inline:auto}.actions{justify-content:center}
  .playground{min-height:500px}.speech{top:8%;right:1%}.scene-object{transform:scale(.82)}.camera{left:3%}.notebook{right:2%}.flower{left:8%}.pencil{right:1%}.about{grid-template-columns:1fr;padding:72px 0;gap:14px}
  .things{grid-template-columns:1fr;padding:72px 0 90px}.project-card,.coming-card{min-height:230px} footer{gap:18px;flex-wrap:wrap}
}