* { box-sizing:border-box }
:root { --paper:#f8f7f1; --ink:#24261f; --line:#d5d5c9; --accent:#ba4118; color:var(--ink); background:var(--paper); font-family:"DM Sans","Segoe UI","Microsoft YaHei",sans-serif }
body,figure,h1,h2,h3,p { margin:0 }
a { color:inherit; text-decoration:none }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #c04f22; outline-offset:4px }
header { border-bottom:1px solid var(--line) }
.bar,.wrap,.tool { width:min(1152px,90%); margin:auto }
.bar { display:flex; align-items:center; justify-content:space-between; min-height:72px }
.brand { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:750; letter-spacing:-1px }
.brand i { font: bold 36px/1 Georgia,serif; color:var(--accent) }
.brand span { font-size:13px; border-left:1px solid var(--line); padding-left:12px; margin-left:4px }
.nav,footer a { font-size:13px; font-weight:600 }
.hero { display:grid; grid-template-columns:1fr 0.95fr; gap:4%; align-items:center; padding:46px 0; border-bottom:1px solid var(--line) }
small,figcaption { font:600 11px/1.4 "IBM Plex Mono",Consolas,monospace; letter-spacing:1.1px }
.intro small { color:#565b50; display:flex; align-items:center; gap:9px }
.intro b { height:8px; width:8px; background:#d55727; display:block }
h1 { font-size:clamp(45px,5.7vw,88px); line-height:1.15; letter-spacing:-.075em; margin:20px 0 14px }
h1 span { color:#da5523 }
p { line-height:1.75; color:#56594f }
.button,button { font:600 14px inherit; font-family:inherit; font-weight:600; display:inline-flex; gap:28px; align-items:center; border:0; border-radius:5px; padding:12px 18px; color:white; background:var(--ink); cursor:pointer }
.button { margin-top:28px; font-size:14px }
.plate { position:relative; height:clamp(250px,24vw,330px); border:1px solid var(--line); border-radius:6px; background-color:#f0efe6; background-image:radial-gradient(#bdbdb0 .8px,transparent .9px); background-size:12px 12px; overflow:hidden }
canvas { display:block; width:100%; height:100% }
figcaption { position:absolute; bottom:12px; left:16px; right:16px; display:flex; justify-content:space-between; color:#68695f; font-size:9px }
#projects { padding:32px 0 44px }
.section-title { display:flex; align-items:baseline; gap:16px; margin-bottom:20px }
h2 { font-size:30px; letter-spacing:-.045em }
.section-title small { color:#737568 }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:22px }
.card { border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fffefa; transition:box-shadow .15s }
.card:hover { box-shadow:0 4px 16px #20282016 }
.cover { height:clamp(125px,12vw,174px); overflow:hidden }
.wave { background:#23392d }
.palette { background:#e6dbbe; display:flex; align-items:center; justify-content:center; isolation:isolate }
.palette i { width:13%; height:110%; border:5px solid #faf5e6; border-bottom-width:20px; transform:rotate(-18deg); margin-left:-1.4%; box-shadow:-3px 0 8px #3333 }
.palette i:nth-child(even) { translate:0 12% }
.generic { display:grid;place-items:center;background:#d8dfcf;font-size:52px }
.details { position:relative; padding:18px 24px 22px }
.details small { color:var(--accent); font-size:11px }
h3 { font-size:23px; margin:5px 0 }
.details p { font-size:14px }
.arrow { position:absolute; right:20px; top:20px; font-size:18px }
footer.bar { border-top:1px solid var(--line); color:#62665b; font-size:14px }
.tool { padding:40px 0 }
.tool h1 { font-size:clamp(32px,5vw,56px) }
.panel { margin:24px 0; border-radius:8px; overflow:hidden }
#waveform { height:280px; background:#23392d }
.controls { display:flex; gap:28px; flex-wrap:wrap }
label { display:grid; gap:10px }
input { accent-color:var(--accent) }
.swatches { display:grid; grid-template-columns:repeat(5,1fr) }
.swatches button { height:220px; align-items:end; justify-content:center; border-radius:0; font-family:Consolas,monospace }
#notice { margin-top:12px; min-height:1.75em }
@media(max-width:700px){
.bar { min-height:60px }
.hero { grid-template-columns:1fr; gap:26px; padding:32px 0 24px }
.plate { height:230px }
.cards { grid-template-columns:1fr }
.cover { height:145px }
.swatches { grid-template-columns:1fr }
.swatches button { height:65px; align-items:center }
}