:root{
  --cream:#f5eee3;--paper:#fffaf2;--paper-deep:#eadcc9;--brown:#6d463d;
  --brown-dark:#3f2925;--salmon:#d48576;--salmon-soft:#f1c8bb;--ink:#342925;
  --muted:#786861;--line:#d8c5b2;--white:#fffdf8;--shadow:0 18px 46px rgba(70,43,35,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:
    radial-gradient(circle at 8% 2%,rgba(212,133,118,.13),transparent 25rem),
    linear-gradient(180deg,#fbf6ee 0,var(--cream) 55%,#efe4d5 100%);
  font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,sans-serif;min-height:100vh
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 13px,rgba(109,70,61,.018) 14px)}
.skip-link{position:fixed;z-index:20;left:12px;top:-60px;background:var(--brown-dark);color:#fff;padding:10px 14px;border-radius:0 0 8px 8px}.skip-link:focus{top:0}
.topline{position:relative;background:var(--brown);color:#fff8ee;text-align:center;padding:8px 16px;font:600 11px/1.4 Georgia,"Times New Roman",serif;letter-spacing:.16em}
main{position:relative;width:min(1160px,calc(100% - 32px));max-width:none;margin:0 auto;padding:30px 0 54px}
.site-header{display:grid;grid-template-columns:132px 1fr minmax(220px,300px);align-items:center;gap:25px;margin:0 0 28px;padding:0 4px;animation:reveal .55s ease-out both}
.siampan-logo{width:122px;height:122px;display:block;border-radius:50%;object-fit:cover;border:1px solid #ddcbb8;box-shadow:0 8px 24px rgba(72,43,34,.11)}
.brand-copy{text-align:center}.brand-copy .eyebrow{display:block;color:var(--brown);font-size:12px;letter-spacing:.12em}.brand-copy h1{margin:2px 0 -2px;color:var(--brown-dark);font:500 clamp(38px,6vw,67px)/1 Georgia,"Times New Roman",serif;letter-spacing:.13em}.brand-copy p{margin:8px 0 0;color:var(--salmon);font:italic 16px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.04em}
.app-purpose{border-left:1px solid var(--line);padding:14px 0 14px 24px}.app-purpose b,.app-purpose span{display:block}.app-purpose b{color:var(--brown);font:600 18px/1.3 Georgia,"Noto Serif Thai",serif}.app-purpose span{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.55}
.panel{background:rgba(255,250,242,.94);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow);padding:24px;animation:reveal .5s ease-out both}
.form-panel{position:relative;border-top:5px solid var(--salmon)}
label,legend{color:var(--brown-dark)}
input,select{background:var(--white);color:var(--ink);border:1px solid #cdb9a6!important;border-radius:3px!important;outline:none}
input:focus,select:focus{border-color:var(--salmon)!important;box-shadow:0 0 0 3px rgba(212,133,118,.2)}
button,.download{border-radius:3px!important;background:var(--brown)!important;color:#fffaf2!important;border:1px solid var(--brown)!important;font-weight:650;box-shadow:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
button:hover,.download:hover{background:var(--brown-dark)!important;box-shadow:0 5px 14px rgba(63,41,37,.16);transform:translateY(-1px)}
button:focus-visible,.download:focus-visible{outline:3px solid var(--salmon-soft);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.secondary{background:transparent!important;color:var(--brown)!important;border-color:#b99f89!important}.secondary:hover{background:#efe2d3!important;color:var(--brown-dark)!important}
.examples button{background:#f4e8db!important;color:var(--brown)!important;border-color:#d8c1ac!important}.examples button:hover{background:var(--salmon-soft)!important}
.hoop-picker{border-color:var(--line)!important}.hoop{background:var(--white)!important;color:var(--brown-dark)!important;border-color:var(--line)!important}.hoop.active{background:var(--brown)!important;color:#fff!important;border-color:var(--brown)!important}.hoop span{color:inherit!important;opacity:.75}
.history-panel{border-left:5px solid var(--paper-deep)}.history-head h2,.result h2,.group-review h3{font-family:Georgia,"Noto Serif Thai",serif;color:var(--brown-dark)}.history-head p,.history-empty{color:var(--muted)!important}.history-list{scrollbar-color:var(--salmon-soft) transparent}.history-card{background:#fff8ef!important;color:var(--brown-dark)!important;border-color:var(--line)!important;border-radius:3px!important}.history-card span{color:var(--muted)!important}.history-card:hover{background:#f3dfd2!important;color:var(--brown-dark)!important}
.result{margin-top:18px}.badge{background:#efe1d2!important;color:var(--brown)!important}.badge.compat{background:#e4ebe2!important;color:#3c6049!important}.download{background:var(--salmon)!important;border-color:var(--salmon)!important}
.metrics div{background:#f5eadf!important;border-color:var(--line)!important}.metrics strong{color:var(--brown)!important}.design-info div{border-left-color:var(--salmon)!important}.design-info span{color:var(--muted)!important}
.scale-editor,.mark-editor{background:#fff8ef!important;border-color:var(--line)!important;border-radius:3px!important}.scale-editor>small,.mark-editor>small,.mark-editor>div>small{color:var(--muted)!important}.mark-list button{background:#fff!important;color:var(--brown)!important;border-color:var(--line)!important}.mark-list button.active{background:var(--brown)!important;color:#fff!important;border-color:var(--brown)!important}
.player-controls{background:#efe2d3!important;border-color:var(--line)!important}.preview{background:#fffaf2!important;border-color:var(--line)!important}.group-chip{background:#f5eadf!important;color:var(--brown-dark)!important;border-color:var(--line)!important}
.timing{border-color:var(--line)!important;background:#fff8ef!important}.time-grid>div{border-color:var(--line)!important}.timing-title strong,.time-grid b{color:var(--brown)!important}.timing small,.note,.legend,#mark-position{color:var(--muted)!important}
.edit-handle{fill:rgba(212,133,118,.14)!important;stroke:var(--salmon)!important}.edit-handle.selected{fill:rgba(212,133,118,.28)!important;stroke:var(--brown)!important}.ruler-tick,.ruler-axis{stroke:#aa8f7c!important}.ruler-label{fill:#7a6256!important}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:780px){
  main{width:min(100% - 20px,680px);padding-top:18px}.topline{font-size:9px;letter-spacing:.1em}
  .site-header{grid-template-columns:76px 1fr;gap:14px;margin-bottom:18px}.siampan-logo{width:72px;height:72px}.brand-copy{text-align:left}.brand-copy .eyebrow{font-size:10px}.brand-copy h1{font-size:31px;letter-spacing:.08em}.brand-copy p{font-size:13px;margin-top:4px}.app-purpose{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:12px 0 0}.app-purpose b{font-size:16px}.panel{padding:16px}.input-row{align-items:stretch}.input-row button{min-height:46px}.history-head{gap:8px}.history-head button{min-height:42px}.history-card{min-width:245px!important}.result-head{gap:12px}.download{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:480px){.input-row{display:grid!important;grid-template-columns:1fr}.result-head{display:grid!important;grid-template-columns:1fr}.download{width:100%}.metrics{grid-template-columns:repeat(2,1fr)!important}.player-controls button{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}