:root{--cream:#ffebd0;--paper:#fffdf5;--navy:#173b61;--orange:#fd8a16;--grey:#7697a0;--teal:#17616e}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--navy);font-family:'Noto Sans TC',Arial,sans-serif;font-size:12px;height:100dvh;overflow:hidden}button,input,select{font:inherit;color:inherit}button{border:1px solid var(--navy);background:var(--paper);padding:8px 10px;min-height:36px;cursor:pointer;border-radius:0}button:disabled{opacity:.35;cursor:default}button:hover{background:var(--cream)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,#viewport:focus-visible{outline:3px solid var(--orange);outline-offset:2px}button[aria-pressed=true],.orange{background:var(--orange);box-shadow:3px 3px 0 var(--grey)}input,select{border:1px solid var(--navy);background:var(--paper);padding:8px;min-width:0}h1,h2,.studio-brand strong,.board-label,.editing{font-family:'Barlow Condensed','Noto Sans TC',sans-serif;font-weight:800;letter-spacing:.035em}.top{height:64px;display:flex;align-items:center;gap:12px;padding:6px 14px;border-bottom:1px solid var(--navy);background:var(--cream)}.studio-brand{flex-shrink:0;display:flex;flex-direction:column;gap:3px}.studio-brand strong{font-size:19px}.back{font-size:10px;text-decoration:none;color:inherit}.back:hover{text-decoration:underline}#cityName{width:130px}.top-actions{margin-left:auto;display:flex;gap:5px;align-items:center}.top-actions button{font-size:10px;white-space:nowrap;padding:7px}.workspace{height:calc(100dvh - 116px);display:grid;grid-template-columns:20% 80%}#library{overflow:auto;padding:18px 15px;border-right:1px solid var(--navy);overscroll-behavior:contain}.library-heading{position:relative}.library-heading h1{font-size:27px;line-height:1.05;margin:0}.library-heading p{margin:8px 0}#closeLibrary{display:none}.category{border-top:1px solid #7697a066;padding-top:12px;margin-top:18px}.category summary{font-weight:700;cursor:pointer;padding:8px 0}.stamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px 4px 4px 0}.stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:105px;padding:8px 4px;touch-action:none}.stamp svg{width:50px;height:50px;pointer-events:none}.stamp small{font-size:9px}.stamp[aria-pressed=true]{border:1px solid var(--navy);box-shadow:3px 3px 0 var(--grey);transform:translate(-1px,-2px)}.canvas-area{position:relative;min-width:0;padding:14px 20px 12px;display:flex;flex-direction:column}.board-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;padding:8px 0 12px}.board-label span:last-child{font-size:18px}#viewport{flex:1;min-height:0;overflow:hidden;position:relative;border:1px solid var(--navy);box-shadow:6px 6px 0 var(--grey);background:var(--paper);touch-action:none;user-select:none;display:flex;align-items:center;justify-content:center}#city{width:100%;height:100%;overflow:visible;transform-origin:center;flex-shrink:0}.board-footer{display:flex;justify-content:space-between;padding-top:12px;font-size:10px;min-height:28px}#context{position:absolute;bottom:48px;left:30px;border:1px solid var(--navy);background:var(--cream);padding:5px;box-shadow:3px 3px var(--grey)}[hidden]{display:none!important}.editing{height:52px;display:flex;align-items:center;justify-content:center;gap:6px;border-top:1px solid var(--navy);overflow:auto;padding:5px 12px;white-space:nowrap}.editing button{font-size:12px;min-height:38px}.quick{display:none}dialog{border:1px solid var(--navy);background:var(--cream);color:var(--navy);box-shadow:6px 6px var(--grey);padding:30px;max-width:90vw}dialog::backdrop{background:#173b6155}dialog h2{font-size:28px;margin-top:0}dialog button{margin:6px}dialog label{display:flex;flex-direction:column;gap:10px}#postcardView{position:fixed;inset:0;background:var(--cream);overflow:auto;padding:20px;z-index:20}.preview-controls{display:flex;justify-content:space-between;align-items:center;gap:20px}.preview-controls h1{font-size:20px}.postcard-fields{display:flex;gap:20px;align-items:end;flex-wrap:wrap;margin:18px auto;max-width:1100px}.postcard-fields label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}.postcard-fields p{width:100%;font-size:11px;line-height:1.7}#postcard{width:210mm;height:148mm;padding:9mm;margin:20px auto;background:var(--paper);color:var(--navy);display:grid;grid-template-rows:17mm 100mm 13mm;border:1px solid #7697a066;overflow:hidden}.post-head{display:flex;align-items:center;justify-content:space-between;gap:8mm}.post-head img{width:28mm;height:13mm;object-fit:contain;object-position:left center}.post-head>div{max-width:145mm;text-align:right}.post-head small{font-family:'Barlow Condensed',sans-serif;font-size:8pt}.post-head h2{font-size:16pt;line-height:1.15;margin:2mm 0;overflow-wrap:anywhere;max-height:13mm}.post-head h2.long{font-size:12pt}#postArt{width:100%;height:100%;min-height:0}#postArt>svg{width:100%;height:100%;display:block}.post-foot{display:flex;justify-content:space-between;align-items:center;gap:8mm;border-top:1px solid #7697a066}.post-foot p{font-size:8pt;line-height:1.4;max-width:145mm;overflow-wrap:anywhere}.post-foot strong{font:800 9pt 'Barlow Condensed',sans-serif;white-space:nowrap}#activity{pointer-events:none}.night-window{fill:#ffe6a1}.alive .sway{animation:sway 3s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}.alive .ripple{animation:ripple 2s ease-in-out infinite alternate}.cloud{opacity:.5}.alive .cloud{animation:cloud 24s linear infinite alternate}.rain{stroke:#7697a0;stroke-width:2;opacity:.55}.alive .rain{animation:rain .7s linear infinite}.spark{fill:var(--orange);animation:pop 1s ease-out infinite alternate}.paused *{animation-play-state:paused!important}@keyframes sway{to{transform:rotate(3deg)}}@keyframes ripple{to{opacity:.6}}@keyframes cloud{to{transform:translateX(150px)}}@keyframes rain{to{transform:translateY(30px)}}@keyframes pop{to{opacity:.1;transform:translateY(-20px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(min-width:1500px){.workspace{grid-template-columns:300px minmax(0,1fr)}}@media(max-width:1100px) and (min-width:761px){.top{height:100px;flex-wrap:wrap}.studio-brand{width:35%}.top-actions{width:100%;justify-content:flex-end}.workspace{height:calc(100dvh - 152px)}.stamp svg{width:42px;height:42px}.library-heading h1{font-size:23px}#library{padding:12px 8px}}@media(max-width:760px){.top{height:112px;padding:6px 10px;flex-wrap:wrap;gap:5px}.studio-brand{flex:1}.studio-brand strong{font-size:17px}.top-actions{width:100%;overflow:auto;margin:0;gap:5px;padding-bottom:3px}.top-actions button{min-height:40px;font-size:10px}.top #cityName{width:100px;font-size:11px}.workspace{height:calc(100dvh - 224px);display:block}.canvas-area{height:100%;padding:8px 12px}.board-label{font-size:8px;gap:6px;padding:4px 0 9px}.board-label strong{max-width:45%}#library{position:fixed;z-index:10;bottom:0;left:0;right:0;height:65dvh;border:1px solid var(--navy);box-shadow:0 -6px var(--grey);background:var(--cream);display:none;padding:20px}body.library-open #library{display:block}#closeLibrary{display:block;position:absolute;right:0;top:0;font-size:22px;min-width:44px}.stamp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.stamp{min-height:100px}.quick{height:60px;display:flex;align-items:center;gap:6px;padding:5px 10px;border-top:1px solid var(--navy)}#recent{display:flex;flex:1;gap:6px;overflow:auto}#recent button{min-width:48px;padding:4px;height:48px}#recent svg{width:34px;height:34px}#openLibrary{height:48px;min-width:48px;font-size:26px;background:var(--orange)}.editing{height:52px;justify-content:flex-start;padding-bottom:max(5px,env(safe-area-inset-bottom))}.editing button{min-height:42px}#context{bottom:45px}.preview-controls{flex-wrap:wrap}.preview-controls h1{order:3;width:100%;font-size:16px}#postcardView{padding:12px}#postcard{transform-origin:top left;margin:15px 0}body.preview #postcard{zoom:var(--post-scale, .45)}}@media(max-height:500px) and (max-width:950px){.top{height:62px;flex-wrap:nowrap}.top-actions{width:auto}.studio-brand{min-width:170px}.studio-brand strong{font-size:13px}#cityName{display:none}.workspace{height:calc(100dvh - 160px)}.quick{height:46px}#recent button,#openLibrary{height:36px}#recent svg{height:27px}.editing{height:52px}.board-label{padding:1px 0 4px}.board-footer{padding-top:7px}}
.workspace,#library,.canvas-area{min-height:0}.workspace{overflow:hidden}#viewport{contain:layout paint}#city{position:absolute;inset:0}.top,.editing{position:relative;z-index:2}#drawing>rect:first-child{transition:fill .65s}.workspace .canvas-area{border-left:0}.stamp small{line-height:1.5}.stamp span{line-height:1.35}
@media(max-height:500px) and (max-width:950px){.workspace{display:block}.canvas-area{height:100%;padding:6px 12px}#library{position:fixed;z-index:10;bottom:0;left:0;right:0;height:80dvh;border:1px solid var(--navy);background:var(--cream);display:none;padding:20px}body.library-open #library{display:block}#closeLibrary{display:block;position:absolute;right:0;top:0;min-width:44px}.stamp-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.quick{display:flex;align-items:center;gap:6px;padding:4px 10px;border-top:1px solid var(--navy)}#recent{display:flex;gap:6px;flex:1;overflow:auto}#recent button{min-width:44px;padding:3px}#openLibrary{min-width:44px;background:var(--orange)}}
@page{size:210mm 148mm;margin:0}@media print{html,body{width:210mm;height:148mm;margin:0!important;background:#fff;overflow:visible!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}body>*:not(#postcardView){display:none!important}#postcardView{display:block!important;position:static;padding:0;overflow:visible;background:transparent}.preview-controls,.postcard-fields{display:none!important}#postcard{zoom:1!important;transform:none!important;margin:0!important;border:0;break-inside:avoid;page-break-after:avoid;width:210mm;height:148mm}.post-head,.post-foot{break-inside:avoid}}