*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 ui-sans-serif,system-ui,sans-serif}a{color:inherit}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,.button{cursor:pointer;border:1px solid currentColor;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:5px;text-decoration:none;display:inline-block}button.secondary{background:transparent;color:var(--ink)}button:hover{filter:brightness(1.15)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1400px;padding:25px 6vw;margin:auto;border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}header strong{font-size:22px}header nav{display:flex;gap:24px;align-items:center}main{max-width:1400px;margin:auto;padding:40px 6vw}h1{font-size:clamp(44px,7.5vw,112px);line-height:.99;letter-spacing:-.065em;margin:0 0 28px;max-width:950px;font-weight:650}h2{font-size:clamp(28px,3.5vw,48px);line-height:1.12;letter-spacing:-.035em;margin-top:0}p{max-width:68ch}header a{font-size:14px;text-decoration:none}.hero{position:relative;min-height:660px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:36px;overflow:hidden;padding:50px 0}.hero p{font-size:20px}.visual{height:490px;position:relative;overflow:hidden;border-radius:46% 46% 12% 12%;background:var(--accent);isolation:isolate}.visual canvas{width:100%;height:100%;display:block}.orb{position:absolute;width:70%;aspect-ratio:1;left:15%;top:12%;border-radius:50%;border:28px solid color-mix(in srgb,var(--paper) 75%,transparent);box-shadow:inset 20px 30px 50px #0003,20px 30px 60px #0002;transform:rotate(-25deg);animation:orbit 12s ease-in-out infinite}.orb:after{content:'';position:absolute;inset:20%;border:14px solid var(--ink);border-radius:50%}.visual-name{position:absolute;bottom:20px;left:24px;right:24px;font-size:20px;color:var(--paper);font-weight:650;z-index:2}.mode-1 .visual{border-radius:0 45% 0 45%}.mode-1 .hero h1{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}.mode-2 .hero{grid-template-columns:1fr}.mode-2 .visual{position:absolute;inset:0 0 0 38%;height:auto;opacity:.30;z-index:-1;border-radius:0}.mode-2 .hero>div:first-child{max-width:900px}.mode-3 .hero{grid-template-columns:.9fr 1.1fr}.mode-3 .visual{order:-1;border-radius:50%}.mode-4 .visual{border-radius:8px;transform:rotate(4deg);height:560px}.mode-4 h1{font-family:Georgia,serif;font-weight:400}.mode-5 .hero{grid-template-columns:1fr 1fr;gap:60px}.mode-5 .visual{border-radius:160px 160px 0 0}.mode-6 .visual{border-radius:0;clip-path:polygon(0 12%,88% 0,100% 88%,12% 100%)}.mode-7 .hero{text-align:center;grid-template-columns:1fr;padding-bottom:0}.mode-7 .hero p{margin:20px auto}.mode-7 .visual{height:310px;border-radius:180px 180px 0 0}.tag{color:var(--accent);font-weight:600}.section{padding:70px 0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:start}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.filters button{padding:8px 16px;background:transparent;color:var(--ink);border-radius:24px}.filters button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.item{padding:0 0 24px;border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}.item-art{height:220px;position:relative;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--accent) 14%,var(--paper));border-radius:4px}.item-art:before{content:'';width:110px;height:130px;border:20px solid var(--accent);border-radius:var(--shape,25%);transform:rotate(var(--rotation,-12deg));box-shadow:14px 14px 0 color-mix(in srgb,var(--ink) 15%,transparent);transition:transform .4s}.item:hover .item-art:before{transform:rotate(12deg) scale(1.08)}.item h3{font-size:23px;line-height:1.2;margin:22px 0 8px}.item p{margin:8px 0 18px;font-size:15px}.item-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.item-actions button{padding:8px 12px}.price{margin-left:auto;font-weight:650}.pill{font-size:13px;background:color-mix(in srgb,var(--accent) 18%,transparent);padding:5px 10px;border-radius:20px}dialog{border:1px solid var(--ink);padding:30px;max-width:min(700px,94vw);background:var(--paper);color:var(--ink);border-radius:12px}dialog::backdrop{background:#0008}dialog button{margin-top:12px}form{display:grid;gap:16px}label{display:grid;gap:6px;font-size:14px;font-weight:600}input,select,textarea{border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);background:color-mix(in srgb,var(--paper) 90%,white);color:var(--ink);border-radius:5px;padding:12px;min-width:0;width:100%}textarea{min-height:110px}.status{min-height:26px;color:var(--accent);font-weight:600}.tool-title h1{font-size:clamp(38px,5vw,72px);letter-spacing:-.05em}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:40px 0}.panel{background:color-mix(in srgb,var(--accent) 7%,var(--paper));padding:28px;border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);border-radius:10px}.result{font-size:clamp(44px,6vw,76px);font-weight:650;line-height:1.1;letter-spacing:-.06em;margin:20px 0;overflow-wrap:anywhere}.result-label{font-size:18px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.table-wrap{overflow:auto;width:100%;margin:24px 0}table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}th,td{padding:14px 12px;border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);vertical-align:top}td button{padding:4px 8px;font-size:12px}th{white-space:nowrap}.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.toolbar label{flex:1;min-width:150px}.note{font-size:13px;opacity:.8}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.step{border-top:3px solid var(--accent);padding-top:20px}.marquee{font-family:Georgia,serif;font-size:clamp(32px,7vw,90px);white-space:nowrap;overflow:hidden;padding:35px 0;color:var(--accent);border-top:1px solid currentColor;border-bottom:1px solid currentColor}.marquee span{display:inline-block;animation:travel 30s linear infinite}.motion-control{position:fixed;bottom:16px;right:16px;font-size:12px;padding:8px 12px;z-index:10}footer{max-width:1400px;padding:35px 6vw;margin:auto;border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);display:flex;justify-content:space-between;gap:20px;font-size:13px}pre{white-space:pre-wrap;font:14px/1.65 ui-monospace,monospace;background:color-mix(in srgb,var(--accent) 8%,var(--paper));padding:24px;border-radius:8px}.skill-layout{max-width:1000px}li{margin:10px 0}.paused *{animation-play-state:paused!important}.empty{padding:35px;text-align:center}@keyframes orbit{0%,100%{transform:rotate(-25deg) translateY(0)}50%{transform:rotate(20deg) translateY(22px)}}@keyframes travel{to{transform:translateX(-20%)}}@media(max-width:760px){header{padding:18px 5vw}header nav a{display:none}main{padding:25px 5vw}.hero,.mode-3 .hero,.mode-5 .hero{grid-template-columns:1fr;min-height:0;padding:35px 0;gap:24px}.hero h1{font-size:58px}.visual,.mode-4 .visual{height:320px}.mode-3 .visual{order:0}.mode-2 .visual{position:relative;inset:auto;height:320px;z-index:0;opacity:1}.items{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.item-art{height:160px}.item-art:before{width:70px;height:90px;border-width:14px}.item h3{font-size:20px}.tool-grid,.steps{grid-template-columns:1fr;gap:24px}.section{padding:40px 0}.section-head{display:block}.field-grid{grid-template-columns:1fr}.panel{padding:20px}.price{margin-left:0}.motion-control{position:static;margin:0 5vw 20px}footer{display:block}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}