:root {
  --ink:#143d28;
  --cream:#fbf7ed;
  --paper:#fffdf8;
  --line:#dce4dd;
  --muted:#66736b;
  --soft:#eef6ef;
  --engrave:#460801;
  --engrave-opacity:.80;
  --fixed-line-gain:0;
  --dynamic-line-gain:.04;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:#213129;font-family:Montserrat,system-ui,-apple-system,Segoe UI,sans-serif}
.phone-landscape-guard{display:none}
.shell{max-width:1180px;margin:0 auto;padding:28px 22px 50px}
.header{margin-bottom:22px}
.header h1{margin:0;color:var(--ink);font-size:clamp(27px,4vw,43px);letter-spacing:-.03em}
.header h1 span{font-size:.42em;color:#748078;letter-spacing:0}
.header p{margin:8px 0 0;color:#5d6a62;font-size:15px}
.badge{display:inline-flex;align-items:center;border-radius:999px;background:#e8f2e9;color:#28563a;padding:5px 9px;font-size:11px;font-weight:700;margin-left:7px;vertical-align:middle}
.grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:22px;align-items:start}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 34px rgba(37,59,44,.06)}
.preview-card{padding:24px}
.preview-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:16px}
.preview-head h2,.controls h2{margin:0;color:var(--ink);font-size:21px}
.dim{font-size:12px;color:var(--muted);font-weight:600}
.stage-wrap{display:flex;justify-content:center;padding:8px 0 17px}
.stage{
  width:min(100%,560px);aspect-ratio:1;border-radius:50%;
  position:relative;overflow:hidden;
  background-image:url('assets/bamboo-opener.jpg');
  background-position:center;background-repeat:no-repeat;background-size:101.5% 101.5%;
  box-shadow:0 20px 38px rgba(50,42,31,.18), inset 0 0 0 1px rgba(95,64,35,.12);
}
.safe-zone{position:absolute;left:50%;top:50%;translate:-50% -50%;width:95.975%;height:95.975%;border-radius:50%;border:1.5px dashed rgba(202,47,31,.85);display:none;pointer-events:none;z-index:5}
.template-layer{position:absolute;left:50%;top:50%;translate:-50% -50%;width:94.475%;height:94.475%;z-index:2}
.fixed-art,.dynamic-text{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:multiply;opacity:var(--engrave-opacity)}
.fixed-art svg{display:block;width:100%;height:100%}
.fixed-art .engrave-filled{paint-order:stroke fill;stroke-linejoin:round}
.dynamic-text text{fill:var(--engrave);paint-order:stroke;stroke:var(--engrave);stroke-opacity:.08;stroke-width:var(--dynamic-line-gain);stroke-linejoin:round}
.prototype-note{font-size:12px;color:#6b746f;line-height:1.45;text-align:center;max-width:520px;margin:0 auto}
.tuner{margin-top:18px;padding:14px;border:1px dashed #cbd9ce;border-radius:13px;background:#f4f8f4}
.tuner-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:#3f5a49;margin-bottom:10px}
.tuner-row{display:grid;grid-template-columns:125px 1fr 60px;align-items:center;gap:10px;font-size:12px;color:#59675e;margin:7px 0}
.tuner input[type=range]{width:100%}
.tuner input[type=color]{width:46px;height:28px;border:0;padding:0;background:transparent}
.controls{padding:24px}
.section{padding:17px 0;border-bottom:1px solid #e7ece8}
.section:last-child{border-bottom:0;padding-bottom:0}
.label{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:#395044;margin-bottom:8px}
.counter{font-weight:600;color:#879188;font-size:11px}
.helper{margin-top:7px;font-size:12px;color:var(--muted)}
.helper.fit-warning{color:#9a3412;font-weight:700}
.section.fit-invalid input{border-color:#c2410c;box-shadow:0 0 0 2px rgba(194,65,12,.08)}

input[type=text],input[type=date],select{
  width:100%;border:1px solid #cfd8d1;background:#fff;border-radius:11px;padding:12px 13px;
  font:500 15px Montserrat,system-ui,sans-serif;color:#24342b;outline:none
}
input:focus,select:focus{border-color:#7b9e84;box-shadow:0 0 0 3px rgba(83,126,94,.11)}
.design-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.design-pick{
  border:2px solid #dce4dd;border-radius:14px;padding:9px;background:#fff;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:8px;min-width:0;transition:border-color .15s ease,background .15s ease,transform .15s ease
}
.design-pick:hover{border-color:#8eaa96;transform:translateY(-1px)}
.design-pick.active{border-color:#285b3c;background:#eff7f0;box-shadow:0 0 0 2px rgba(40,91,60,.05)}
.design-thumb-shell{
  min-height:142px;border-radius:11px;background:#f7f8f5;display:flex;align-items:center;justify-content:center;
  padding:8px;overflow:hidden
}
.design-thumb-disc{
  position:relative;width:min(136px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background-position:center;background-repeat:no-repeat;background-size:101.5% 101.5%;
  box-shadow:0 7px 16px rgba(50,42,31,.16),inset 0 0 0 1px rgba(95,64,35,.10)
}
.design-thumb-template{position:absolute;left:50%;top:50%;translate:-50% -50%;mix-blend-mode:multiply;opacity:.8}
.design-thumb-fixed,.design-thumb-text{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.design-thumb-fixed svg{display:block;width:100%;height:100%}
.design-thumb-text text{fill:#460801;paint-order:stroke;stroke:#460801;stroke-opacity:.08;stroke-width:.04;stroke-linejoin:round}
.design-card-name{display:block;text-align:center;color:#1d4930;font-size:13px;font-weight:800;line-height:1.25;padding:0 3px 2px}
@media(max-width:520px){.design-picks{gap:8px}.design-thumb-shell{min-height:122px;padding:6px}.design-thumb-disc{width:112px}.design-card-name{font-size:12px}}
.font-sample{font-size:25px;line-height:1.15;display:block;margin-top:4px;color:#2c4b37}
.status{margin-top:18px;border-radius:12px;padding:12px 13px;background:#eef7f0;color:#2b5639;font-size:12px;line-height:1.45}
.status.error{background:#fff1ed;color:#8e3627}
.note{margin-top:18px;padding:12px 13px;border-radius:12px;background:#fff7df;color:#65542e;font-size:12px;line-height:1.45}
.footer-chip{display:inline-flex;margin-top:8px;padding:4px 8px;border-radius:999px;background:#edf3ee;color:#486150;font-size:10px;font-weight:700}
.loading{opacity:.65}
@media(max-width:850px){.grid{grid-template-columns:1fr}.shell{padding:18px 14px 38px}.preview-card,.controls{padding:17px}}

@media (orientation:landscape) and (max-height:560px) and (hover:none) and (pointer:coarse){
  body{overflow:hidden}
  .phone-landscape-guard{
    position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
    padding:24px;background:var(--cream);text-align:center
  }
  .phone-landscape-guard-card{
    width:min(100%,520px);padding:28px 24px;background:var(--paper);border:1px solid var(--line);
    border-radius:18px;box-shadow:0 18px 42px rgba(37,59,44,.12)
  }
  .phone-landscape-guard-icon{font-size:42px;line-height:1;margin-bottom:12px}
  .phone-landscape-guard h2{margin:0;color:var(--ink);font-size:27px;letter-spacing:-.02em}
  .phone-landscape-guard p{margin:10px 0 0;color:#405247;font-size:16px;line-height:1.45}
  .phone-landscape-guard .phone-landscape-guard-note{color:var(--muted);font-size:13px}
}