@import"https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Hachi+Maru+Pop&display=swap";:root{--ink: #101315;--red: #ff1f3d;--green: #31543b;--sage: #9aae9a;font-family:Inter,Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;min-width:320px;min-height:100vh}body{overflow:hidden;color:#f8fbf4;background:linear-gradient(135deg,#07100b,#17241a 44%,#4d5a4d)}button,input{font:inherit}.wallpets-demo{min-height:100svh}.demo-stage{--stage-pad-x: clamp(18px, 4vw, 46px);--stage-pad-top: clamp(16px, 2.6vw, 34px);--stage-pad-bottom: clamp(10px, 1.8vw, 24px);--brand-mark-size: clamp(42px, 4.4vw, 74px);--header-reserve: var(--brand-mark-size);--header-gap: clamp(10px, 1.3vw, 20px);position:relative;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);align-items:start;justify-items:center;gap:var(--header-gap);min-height:100svh;padding:var(--stage-pad-top) var(--stage-pad-x) var(--stage-pad-bottom)}.demo-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 19%,transparent 82%,rgba(255,255,255,.04)),linear-gradient(180deg,rgba(255,255,255,.08),transparent 28%,transparent 76%,rgba(0,0,0,.18));pointer-events:none}.demo-header{position:relative;z-index:6;align-items:center;width:100%;max-width:1380px;min-height:var(--header-reserve);display:flex}.site-brand{display:flex;align-items:center;gap:clamp(8px,1.1vw,14px);color:#fff;text-decoration:none;pointer-events:auto;filter:drop-shadow(0 12px 28px rgba(0,0,0,.28))}.brand-mark{display:block;width:var(--brand-mark-size);height:var(--brand-mark-size);object-fit:contain;flex:0 0 auto}.brand-copy{display:grid;gap:2px;min-width:0}.brand-wordmark{color:#fef9ff;font-family:Caveat,Comic Sans MS,Marker Felt,cursive,sans-serif;font-size:clamp(30px,4.2vw,68px);font-weight:400;line-height:.86;letter-spacing:0;text-shadow:0 2px 0 rgba(151,13,90,.92),0 0 18px rgba(151,13,90,.45),0 12px 26px rgba(0,0,0,.28);white-space:nowrap}.brand-tagline{color:#f8fbf4c7;font-size:clamp(10px,.92vw,14px);font-weight:780;line-height:1;letter-spacing:0;white-space:nowrap}.laptop{--screen-left: 11.979%;--screen-top: 14.258%;--screen-width: 75.781%;--screen-height: 66.895%;--control-top: 1.5%;--bezel-x: 10.3%;position:relative;z-index:2;align-self:start;width:min(calc(100vw - var(--stage-pad-x) - var(--stage-pad-x)),1380px,calc((100svh - var(--stage-pad-top) - var(--stage-pad-bottom) - var(--header-reserve) - var(--header-gap)) * 1.5));aspect-ratio:3 / 2}.mockup-control{position:absolute;top:var(--control-top);z-index:7;display:grid;gap:4px;pointer-events:auto}.profile-position-control{left:var(--bezel-x);justify-items:start}.wallpaper-control{left:50%;justify-items:center;transform:translate(-50%)}.pet-size-control{right:var(--bezel-x);justify-items:end;text-align:right}.control-label{color:#ffffffeb;font-family:Caveat,Comic Sans MS,Marker Felt,cursive,sans-serif;font-size:clamp(18px,2.1vw,31px);font-weight:700;line-height:.9;letter-spacing:0;text-shadow:0 1px 0 rgba(151,13,90,.8),0 10px 20px rgba(0,0,0,.24);white-space:nowrap}.profile-toggle,.pet-size-picker{display:flex;align-items:center;gap:clamp(5px,.55vw,8px)}.profile-position-button,.pet-size-button{min-width:clamp(28px,3.1vw,43px);height:clamp(18px,1.95vw,26px);padding:0 clamp(7px,.8vw,11px);border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#ffffffdb;background:#0d10135c;box-shadow:inset 0 1px #ffffff24,0 8px 20px #0000002e;cursor:pointer;font-size:clamp(10px,.88vw,13px);font-weight:820;letter-spacing:0}.profile-position-button.is-active,.pet-size-button.is-active{border-color:#f7c84f;color:#fff8d2;animation:text-control-gold-halo 1.16s ease-in-out infinite}.screen{position:absolute;left:var(--screen-left);top:var(--screen-top);z-index:1;overflow:hidden;width:var(--screen-width);height:var(--screen-height);background:#fff;cursor:none}.wallpaper-layer{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .56s ease;pointer-events:none}.wallpaper-layer.is-active{opacity:1}.pet-video{--pet-safe-clip-top: 2%;--pet-safe-clip-x: 5%;position:absolute;bottom:0;left:50%;z-index:1;display:block;width:auto;max-width:none;height:calc(100% * var(--pet-scale, 1));transform:translate(-50%);object-fit:contain;object-position:center bottom;pointer-events:none;-webkit-user-select:none;user-select:none;clip-path:inset(var(--pet-safe-clip-top) var(--pet-safe-clip-x) 0 var(--pet-safe-clip-x));filter:saturate(1.02) contrast(1.01);transition:height .28s ease}.wallpaper-picker{display:flex;align-items:center;gap:clamp(5px,.6vw,9px)}.wallpaper-swatch{display:grid;place-items:center;width:clamp(36px,4.3vw,58px);height:clamp(16px,1.7vw,22px);padding:3px;border:0;border-radius:999px;background:#12101224;box-shadow:inset 0 0 0 1px #ffffff29;cursor:pointer}.wallpaper-thumb{display:block;width:100%;height:100%;min-height:8px;border:1px solid rgba(18,18,18,.86);border-radius:3px;background-color:#fff;background-position:center;background-size:cover;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.wallpaper-thumb--purple{border-color:#ede2ff80;background:radial-gradient(circle at 18% 18%,rgba(184,143,255,.58),transparent 48%),linear-gradient(135deg,#171021,#2c214b 52%,#1b162d)}.wallpaper-thumb--catfather,.wallpaper-thumb--rain{background-image:var(--thumb-image)}.wallpaper-swatch.is-active .wallpaper-thumb{border-color:#f7c84f;transform:scale(1.04);animation:wallpaper-gold-halo 1.16s ease-in-out infinite}@keyframes wallpaper-gold-halo{0%,to{box-shadow:0 0 0 1px #ffd9709e,0 0 8px #f7c84f7a,0 0 16px #f7c84f3d}50%{box-shadow:0 0 0 2px #ffe891f5,0 0 14px #f7c84fdb,0 0 28px #f7c84f80}}@keyframes text-control-gold-halo{0%,to{box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #ffd9708a,0 0 8px #f7c84f75,0 8px 20px #0000002e}50%{box-shadow:inset 0 1px #ffffff3d,0 0 0 2px #ffe891eb,0 0 15px #f7c84fd1,0 8px 24px #0000003d}}.pet-profile{position:absolute;top:4.8%;left:4.6%;z-index:2;color:#090b0ce6;max-width:46%;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.62);transition:opacity .16s ease,transform .26s ease}.pet-profile.is-transitioning,.pet-profile.is-hidden{opacity:0;transform:translateY(-4px)}.pet-profile.is-right{right:4.6%;left:auto;text-align:right}.pet-profile.is-right .name-row{justify-content:flex-end}.pet-profile.is-right .profile-list div{justify-items:end;text-align:right}.name-row{display:flex;align-items:baseline;gap:12px;min-width:0;white-space:nowrap}.kana-name{color:#080a0be6;font-family:Hachi Maru Pop,Hannotate SC,Yuji Syuku,Yuji Mai,Hiragino Mincho ProN,Yu Mincho,serif;font-size:clamp(26px,3.1vw,52px);font-weight:400;line-height:.95;letter-spacing:0;white-space:nowrap}.roman-name{color:#080a0b85;font-size:clamp(10px,.92vw,14px);font-weight:760;letter-spacing:0}.profile-list{display:grid;gap:3px;margin:7px 0 0;color:#080a0bb8;font-size:clamp(9px,.78vw,12px);line-height:1.28}.profile-list div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:7px}.profile-list dt,.profile-list dd{margin:0}.profile-list dt{color:#080a0b6b;font-weight:760}.profile-list dd{color:#080a0bbd;font-weight:620}.laptop-frame{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.laser{position:absolute;z-index:5;width:clamp(16px,1.7vw,28px);aspect-ratio:1;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 6%,#ffb1ba 7% 15%,var(--red) 16% 42%,rgba(255,31,61,.28) 43% 70%,transparent 71%);box-shadow:0 0 10px #ff1f3df5,0 0 24px #ff1f3dad,0 0 58px #ff1f3d6b;transform:translate(-50%,-50%) scale(.92);pointer-events:none;transition:opacity .16s ease}.laser.is-visible{opacity:1;animation:laser-glow 1.08s ease-in-out infinite}.laser:after{content:"";position:absolute;inset:-180%;border-radius:50%;background:radial-gradient(circle,rgba(255,31,61,.24),transparent 62%);animation:laser-pulse 1.08s ease-in-out infinite}@keyframes laser-glow{0%,to{filter:saturate(.98) brightness(.9);transform:translate(-50%,-50%) scale(.88)}50%{filter:saturate(1.2) brightness(1.18);transform:translate(-50%,-50%) scale(1)}}@keyframes laser-pulse{0%,to{transform:scale(.72);opacity:.46}50%{transform:scale(1);opacity:1}}@media(max-width:760px){body{overflow:hidden}.demo-stage{--stage-pad-x: 12px;--stage-pad-top: max(18px, env(safe-area-inset-top));--stage-pad-bottom: max(18px, env(safe-area-inset-bottom));--brand-mark-size: 34px;--header-reserve: var(--brand-mark-size);--header-gap: 8px;min-height:100svh;align-content:center;padding:var(--stage-pad-top) var(--stage-pad-x) var(--stage-pad-bottom)}.site-brand{gap:7px}.brand-mark{width:var(--brand-mark-size);height:var(--brand-mark-size)}.brand-wordmark{font-size:clamp(24px,8vw,32px)}.brand-tagline{display:none}.pet-profile{top:5%;left:4.6%;max-width:52%}.name-row{gap:7px}.kana-name{font-size:clamp(13px,4vw,17px)}.roman-name{font-size:clamp(7px,2.3vw,9px)}.profile-list{gap:1px;margin-top:3px;font-size:clamp(6px,1.8vw,7px)}.profile-list div{grid-template-columns:39px minmax(0,1fr);gap:4px}.laptop{--control-top: .2%;--bezel-x: 9.2%;width:min(calc(100vw - var(--stage-pad-x) - var(--stage-pad-x)),calc((100svh - var(--stage-pad-top) - var(--stage-pad-bottom) - var(--header-reserve) - var(--header-gap)) * 1.5));max-width:none}.mockup-control{gap:2px}.control-label{font-size:clamp(13px,4.5vw,18px)}.profile-toggle,.pet-size-picker,.wallpaper-picker{gap:4px}.profile-position-button,.pet-size-button{min-width:clamp(24px,7vw,31px);height:clamp(15px,4vw,18px);padding:0 5px;font-size:clamp(8px,2.4vw,10px)}.wallpaper-swatch{width:clamp(28px,8.2vw,36px);height:clamp(14px,4.4vw,17px);padding:2px}.laser{width:clamp(12px,4.2vw,18px)}}@media(max-width:760px)and (orientation:landscape){.demo-stage{--stage-pad-x: 12px;--stage-pad-top: 12px;--stage-pad-bottom: 12px;--brand-mark-size: 30px;--header-reserve: var(--brand-mark-size);--header-gap: 6px;padding:var(--stage-pad-top) var(--stage-pad-x) var(--stage-pad-bottom)}.brand-mark{width:var(--brand-mark-size);height:var(--brand-mark-size)}.brand-wordmark{font-size:clamp(21px,5.2vw,27px)}.pet-profile{top:4.6%;left:4.4%}.kana-name{font-size:clamp(12px,3.4vw,16px)}.profile-list{display:none}.laptop{width:min(calc(100vw - var(--stage-pad-x) - var(--stage-pad-x)),calc((100svh - var(--stage-pad-top) - var(--stage-pad-bottom) - var(--header-reserve) - var(--header-gap)) * 1.5))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}}