/* Direction 02 — graphite, parchment and restrained metallic warmth. */
:root{color-scheme:dark;--paper:#121413;--ink:#eeeae0;--lime:#d5c5a4;--blue:#d5c5a4;--coral:#9ba890;--line:#373b36;--system:#30392f}
body{background:var(--paper);color:var(--ink)}
header{padding-block:30px;align-items:center}
.wordmark{font-size:29px;letter-spacing:-1.6px}
.wordmark span{font-size:23px;color:#b6bea9}
nav{background:#1c1f1c;border:1px solid #343a32;font-size:10px}
nav a{padding-inline:22px;color:#cacfc2}
nav a:hover{background:#2b3029;color:#fff}
nav a:last-child{background:#d5c5a4;color:#171b16}
.header-note,.hero-aside{color:#aeb5a7;line-height:1.8}
.hero{padding-top:72px;padding-bottom:70px;background:radial-gradient(ellipse at 90% 65%,#27362a44,transparent 55%)}
.label{color:#b2b8ab;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.hero h1{font-size:clamp(62px,8.2vw,125px);font-weight:400;line-height:1.04;letter-spacing:-.07em;margin-top:55px;margin-bottom:50px}
.hero h1 em{color:#d5c5a4;font-size:1.14em}
.hero-flower{font-size:.85em;color:#879580;top:5px;opacity:.75;transform:rotate(-6deg)}
.hero:hover .hero-flower{transform:rotate(12deg)}
.hero-baseline p{color:#c0c6b9;font-size:13px;line-height:1.9}
.pill{background:#222820;border:1px solid #535d4b;color:#eeeae0;box-shadow:none;font-size:11px}
.pill span{background:#d5c5a4;color:#171b16}
.pill:hover{transform:translateY(-2px)}
.playground{border:1px solid #373d33;border-radius:8px;overflow:hidden;background:#171b16}
.play-bar{background:#1b201a;border-bottom:1px solid #343b30;border-radius:0;padding-block:18px;color:#d8ded0}
.play-bar h2{font-size:11px;letter-spacing:.02em}
.play-bar button{background:#242b21;border:1px solid #59634e;color:#e1e7d8}
.play-stage{background:radial-gradient(ellipse at 50% 50%,#303d2b66,transparent 65%),#151914}
.stage-grid{opacity:.09;background-image:linear-gradient(#a5ab8a 1px,transparent 1px),linear-gradient(90deg,#a5ab8a 1px,transparent 1px)}
.stage-coordinate{color:#a6b09c;font-size:7px}
.toy{box-shadow:0 20px 45px #0005;border:1px solid #65705a66;border-radius:4px;color:#ebe8df}
.toy-type{background:#34352d;transform:rotate(-4deg)}
.toy-type>p{font-weight:400;letter-spacing:-5px;color:#ece5d5}
.toy-type>p em{color:#d5c5a4}
.toy-label{color:#c0c7b6;font-size:8px;letter-spacing:.03em}
.toy-foot{color:#b7c0ab;font-size:8px}
.type-dot{background:#b4bea4;width:14px;height:14px}
.toy-interface{background:#2b3233;transform:rotate(2deg)}
.eye-pair i{background:#dad9cb;border-color:#111a16}
.eye-pair b{background:#28302a}
.hello-ui{border-color:#56625d;color:#d6ddd3}
.hello-ui button{background:#c4ceb9;color:#1b221b;font-size:22px}
.toy-system{background:var(--system);transform:rotate(4deg)}
.system-shapes i{background:#c9c5ac}
.system-title{color:#e3e7dc;font-size:18px;font-weight:400}
.swatch{border:1px solid #b0b89e;width:32px;height:32px}
.swatch.active{outline-color:#d5c5a4}
.sticker-one{background:#232b20;border:1px solid #637055;color:#c9d2bf;border-radius:3px;transform:rotate(3deg);width:115px;height:72px;font-size:10px;font-weight:400}
.sticker-two{background:#262a22;border:1px solid #5c6651;color:#d4dbc9;transform:rotate(4deg);font-weight:400;letter-spacing:.08em}
.stage-plus{color:#87977b;font-size:75px}
.play-caption{background:#171b16;color:#aeb9a3;padding:19px 24px;line-height:1.7}
.intro h2{font-weight:400}
.intro h2 em{color:#b7c3a8}
.intro-bottom p,.service-detail p{color:#b8c0b0}
.intro-spark{color:#91a181;font-size:70px}
.services details[open] h2{color:#d5c5a4}
.service-detail>div span{border-color:#444e3d;color:#cad1c0;background:#1c2119}
.row-no,.row-arrow{color:#a6b49a}
.process{background:#1a1f18;border-block:1px solid #333c2c}
.process li{border-color:#404a37}
.process-title>p,.process li p{color:#b8c1ad}
.process h2 em{color:#d5c5a4}
.process li>span{color:#a5b196}
.contact{background:radial-gradient(ellipse at 85% 25%,#34432d55,transparent 60%),#10150e;color:#ecece1;border-top:1px solid #3c4832}
.contact h2{font-weight:400}
.contact h2 em{color:#d5c5a4}
.contact-eyes{opacity:.75;transform:rotate(-5deg)}
.contact-eyes i{background:#c9cfbd;border-color:#26341f}
.contact-eyes i:after{background:#25321e}
.contact-grid>p{color:#b9c4af;line-height:1.9}
.contact-email{border-color:#58644d;color:#ece9de}
.contact-email span{color:#d5c5a4}
.email-tools{color:#acb99f}
.email-tools button{color:#e2e6d7}
#copy-status{color:#d5c5a4}
footer{border-color:#3e4933;color:#b0bda2}
footer .wordmark{color:#e5e8dc}
.skip{background:#d5c5a4;color:#171b16}
:focus-visible{outline-color:#d5c5a4}
::selection{background:#d5c5a4;color:#171b16}
.play-stage[data-mood="1"] .toy-type{transform:rotate(3deg)}
.play-stage[data-mood="1"] .toy-interface{transform:rotate(-3deg)}
.play-stage[data-mood="1"] .toy-system{transform:rotate(-4deg)}
.play-stage[data-mood="2"] .toy-type{transform:rotate(-3deg)}
.play-stage[data-mood="2"] .toy-interface{transform:rotate(3deg)}
.play-stage[data-mood="2"] .toy-system{transform:rotate(-2deg)}
@media(max-width:1000px){.hero h1{font-size:8.6vw}}
@media(max-width:650px){header{padding-block:22px}.wordmark{font-size:27px}.hero{padding-top:44px;padding-bottom:45px}.hero h1{font-size:clamp(45px,10vw,65px);line-height:1.08;margin:37px 0}.hero h1 em{font-size:1.1em}.hero-flower{font-size:.65em;top:-8px}.label{font-size:8px}.hero-baseline p{font-size:12px}.play-bar{padding:13px 14px}.play-bar h2{font-size:10px}.sticker-one{width:82px;height:64px;font-size:9px}.play-caption{padding:15px;font-size:8px}.intro-spark{font-size:50px}.contact h2{font-size:clamp(40px,9.1vw,62px)}.contact-email{font-size:clamp(25px,7.5vw,37px)}}