:root{--ink:#23342f;--muted:#65746e;--paper:#f2f0e7;--cream:#fbfaf4;--line:#cdd2c7;--leaf:#3d755d;--leaf2:#8fb59a;--orange:#ed8055;--yellow:#e8c85b;--blue:#70a3ad;--shadow:0 12px 32px rgba(39,55,48,.08)}
*{box-sizing:border-box}html{color-scheme:light}body{margin:0;color:var(--ink);background:var(--paper);font-family:ui-rounded,"Arial Rounded MT Bold","Hiragino Sans GB","Microsoft YaHei",sans-serif}.masthead{max-width:1240px;margin:0 auto;padding:44px 28px 30px;display:grid;grid-template-columns:82px 1fr 270px;gap:24px;align-items:center}.brand-mark{width:70px;height:70px;border:2px solid var(--ink);border-radius:50%;position:relative;background:var(--yellow)}.brand-mark span{position:absolute;display:block;background:var(--ink);height:2px;width:48px;left:9px;transform-origin:center}.brand-mark span:nth-child(1){top:23px;transform:rotate(18deg)}.brand-mark span:nth-child(2){top:34px;transform:rotate(-15deg)}.brand-mark span:nth-child(3){top:45px;transform:rotate(10deg)}.eyebrow{font:700 11px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;color:var(--leaf);margin:0 0 7px}.masthead h1{font-size:clamp(34px,5vw,62px);letter-spacing:-.06em;line-height:1;margin:0}.lede{margin:10px 0 0;color:var(--muted);font-size:16px}.notice{padding:14px 16px;border-left:3px solid var(--orange);font-size:12px;line-height:1.55;background:rgba(255,255,255,.48)}main{max-width:1240px;margin:auto;padding:0 28px 60px}.panel{border:1px solid var(--line);background:var(--cream);box-shadow:var(--shadow)}.setup{padding:23px 26px;margin-bottom:18px}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.section-head>div,.results-head>div,.generate-copy{display:flex;align-items:center;gap:12px}.section-head.compact{margin-bottom:12px}.step{font:700 11px/26px ui-monospace,monospace;text-align:center;width:28px;height:28px;border:1px solid var(--ink);border-radius:50%;flex:none}.section-head h2,.results-head h2,.generate h2,.savebar h2{font-size:17px;margin:0;letter-spacing:-.02em}.measure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.measure-grid label{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);padding:10px 12px;font-size:13px}.measure-grid input{border:0;border-bottom:1px solid var(--ink);width:64px;text-align:right;font:700 18px ui-monospace,monospace;color:var(--ink);background:transparent}.measure-grid input:focus,.obj-size input:focus,.name-field input:focus{outline:2px solid var(--yellow);outline-offset:2px}.field-error{color:#a83f27;font-size:12px;margin:8px 0 0;min-height:1em}.ghost,.secondary,.primary{font:700 13px inherit;cursor:pointer}.ghost{border:0;background:transparent;color:var(--leaf);text-decoration:underline;text-underline-offset:3px}.work-grid{display:grid;grid-template-columns:330px 1fr;gap:18px}.objects{padding:22px}.hint{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 12px}.object-list{display:grid;gap:8px}.object-row{border-top:1px solid var(--line);padding:12px 0 4px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center}.obj-icon{height:36px;width:36px;border-radius:50%;display:grid;place-items:center;font-size:19px}.object-row:nth-child(1) .obj-icon{background:#d8e9dc}.object-row:nth-child(2) .obj-icon{background:#fae0a7}.object-row:nth-child(3) .obj-icon{background:#cce2e7}.object-row:nth-child(4) .obj-icon{background:#f4d3c6}.obj-name{font-size:13px;font-weight:700;margin-bottom:6px}.obj-size{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:11px}.obj-size input{width:44px;border:0;border-bottom:1px solid var(--line);background:transparent;font:12px ui-monospace,monospace;color:var(--ink)}.pin{position:relative;display:grid;justify-items:center;gap:3px;font-size:10px;color:var(--muted);cursor:pointer}.pin input{position:absolute;opacity:0}.pin b{width:28px;height:18px;border-radius:9px;background:#ccd3ce;position:relative}.pin b:after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:white;top:3px;left:3px;transition:.2s}.pin input:checked+b{background:var(--leaf)}.pin input:checked+b:after{left:13px}.canvas-section{padding:22px;min-width:0}.drag-hint{font:11px ui-monospace,monospace;color:var(--muted)}.ruler{height:14px;margin-left:14px;background:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 5%,var(--muted) 5% calc(5% + 1px),transparent calc(5% + 1px) 10%);opacity:.45}.cage{width:100%;aspect-ratio:3/2;max-height:470px;position:relative;overflow:hidden;border:3px solid var(--ink);background:#fdfcf7;touch-action:none}.cage:before,.cage:after{content:"";position:absolute;z-index:4;pointer-events:none}.cage:before{inset:0;background:repeating-linear-gradient(90deg,transparent 0 6.3%,rgba(35,52,47,.13) 6.3% 6.6%)}.cage:after{top:0;bottom:0;left:50%;border-left:1px dashed rgba(35,52,47,.3)}.cage-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(61,117,93,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(61,117,93,.07) 1px,transparent 1px);background-size:5% 10%}.flight-lane{position:absolute;z-index:1;left:2%;right:2%;height:22%;top:39%;border-top:1px dashed var(--leaf);border-bottom:1px dashed var(--leaf);background:rgba(143,181,154,.13);pointer-events:none;display:flex;align-items:center;justify-content:center}.flight-lane span{font:10px ui-monospace,monospace;color:var(--leaf);background:#fdfcf7;padding:3px 7px}.cage-object{position:absolute;z-index:3;border:2px solid currentColor;background:color-mix(in srgb,currentColor 18%,white);display:flex;align-items:center;justify-content:center;text-align:center;cursor:grab;user-select:none;min-width:22px;min-height:22px;box-shadow:0 3px 8px rgba(35,52,47,.14)}.cage-object.dragging{cursor:grabbing;z-index:8;box-shadow:0 8px 22px rgba(35,52,47,.24)}.cage-object .shape-label{font-size:10px;font-weight:700;line-height:1.1;pointer-events:none;overflow:hidden}.cage-object.fixed:after{content:"•";position:absolute;right:2px;top:-7px;color:var(--orange);font-size:20px}.type-perch{color:#47765f;border-radius:10px}.type-food{color:#a77b13;border-radius:50%}.type-water{color:#377d8b;border-radius:50%}.type-toy{color:#b75537;border-radius:8px;transform:rotate(2deg)}.canvas-foot{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-top:0}.canvas-foot div{padding:10px 12px;border-right:1px solid var(--line)}.canvas-foot div:last-child{border:0}.canvas-foot b{font:700 18px ui-monospace,monospace;display:block}.canvas-foot span{font-size:10px;color:var(--muted)}.generate{margin:18px 0 34px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:#fff}.generate-copy>div p{font-size:12px;color:#bdc8c3;margin:4px 0 0;max-width:650px}.generate .step{border-color:white}.primary{border:0;background:var(--yellow);color:var(--ink);padding:13px 16px;min-width:180px;display:flex;justify-content:space-between}.primary:active{transform:translateY(1px)}.results{margin-bottom:34px}.results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.results-head p{font:11px ui-monospace,monospace;color:var(--muted)}.candidate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.empty-state{grid-column:1/-1;border:1px dashed #aeb8b0;padding:45px;text-align:center;color:var(--muted)}.empty-state p{margin:12px 0 4px;font-weight:700;color:var(--ink)}.empty-state span{font-size:12px}.empty-cage{width:100px;height:62px;border:2px solid var(--muted);margin:auto;display:flex;align-items:center;justify-content:space-evenly}.empty-cage i{display:block;width:14px;height:14px;border:1px solid var(--muted);border-radius:50%}.candidate{background:var(--cream);border:1px solid var(--line);padding:13px;box-shadow:var(--shadow)}.candidate h3{font-size:14px;margin:0}.candidate-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.candidate-tag{font:10px ui-monospace,monospace;color:var(--leaf)}.mini-cage{aspect-ratio:3/2;position:relative;border:2px solid var(--ink);overflow:hidden;background:repeating-linear-gradient(90deg,#fdfcf7 0 9.7%,#e6e9e3 9.7% 10%)}.mini-lane{position:absolute;left:0;right:0;background:rgba(143,181,154,.26);border-top:1px dashed var(--leaf);border-bottom:1px dashed var(--leaf)}.mini-obj{position:absolute;border:1px solid currentColor;background:color-mix(in srgb,currentColor 30%,white);min-width:4px;min-height:4px}.candidate-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:11px 0}.stat-box{border-left:3px solid var(--leaf2);padding-left:8px}.stat-box b{font:700 15px ui-monospace,monospace;display:block}.stat-box span{font-size:9px;color:var(--muted)}.density-bar{height:8px;background:#e2e5df;position:relative;margin:8px 0}.density-bar i{position:absolute;inset:0 auto 0 0;background:var(--orange)}.apply{width:100%;border:1px solid var(--ink);padding:9px;background:transparent;color:var(--ink);font-weight:700;cursor:pointer}.apply:hover{background:var(--ink);color:white}.candidate.warning{border-color:var(--orange)}.candidate-warning{font-size:10px;color:#a74428;min-height:2.5em}.savebar{padding:18px 22px;display:grid;grid-template-columns:1fr minmax(180px,300px) auto auto;align-items:center;gap:14px}.savebar p{font-size:11px;color:var(--muted);margin:3px 0 0}.name-field input{width:100%;padding:10px;border:1px solid var(--line);background:#fff}.secondary{border:0;background:var(--leaf);color:white;padding:11px 15px}.saved-section{margin-top:14px}.saved-plans{display:grid;gap:8px}.saved-plan{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;border:1px solid var(--line);padding:12px 16px;background:var(--cream)}.saved-plan b{font-size:13px}.saved-plan small{display:block;color:var(--muted);margin-top:3px}.saved-plan button{border:0;background:none;color:var(--leaf);cursor:pointer}.saved-plan .delete{color:#a74428}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:11px 18px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:820px){.masthead{grid-template-columns:60px 1fr;padding-top:28px}.brand-mark{width:56px;height:56px}.brand-mark span{width:38px;left:7px}.notice{grid-column:1/-1}.work-grid{grid-template-columns:1fr}.objects{order:2}.canvas-section{order:1}.candidate-grid{grid-template-columns:1fr 1fr}.savebar{grid-template-columns:1fr 1fr}.savebar>div{grid-column:1/-1}.measure-grid{grid-template-columns:1fr}.generate{align-items:flex-start;gap:15px}.generate-copy{align-items:flex-start}.primary{min-width:150px}.object-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.masthead{padding:22px 16px}.masthead h1{font-size:35px}.brand-mark{display:none}.masthead{grid-template-columns:1fr}.notice{grid-column:auto}main{padding:0 12px 40px}.setup,.objects,.canvas-section{padding:16px}.object-list{grid-template-columns:1fr}.cage{aspect-ratio:4/3}.candidate-grid{grid-template-columns:1fr}.generate{display:block}.generate-copy{margin-bottom:14px}.primary{width:100%}.savebar{grid-template-columns:1fr}.savebar>div{grid-column:auto}.results-head{align-items:flex-start}.results-head p{text-align:right;margin-left:12px}.canvas-foot span{font-size:9px}.saved-plan{grid-template-columns:1fr auto}.saved-plan .delete{grid-column:2}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}