:root{--bg:#efeee9;--paper:#f8f7f3;--ink:#11110f;--muted:#77746c;--line:#d3d0c8;--line2:#e0ddd6;--black:#151514;--ease:cubic-bezier(.2,.75,.2,1)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",Arial,sans-serif}button,input,textarea{font:inherit}button{color:inherit}.app{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(239,238,233,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(190,187,177,.7)}.brand{display:flex;align-items:baseline;gap:12px}.brand b{font-size:14px;letter-spacing:.14em}.brand span{font-family:Georgia,serif;font-style:italic;color:var(--muted);font-size:12px}.top-actions{display:flex;gap:8px}.pill,.iconbtn{border:1px solid var(--line);background:rgba(255,255,255,.48);border-radius:999px;padding:9px 14px;font-size:11px;cursor:pointer;transition:.2s var(--ease)}.pill:hover,.iconbtn:hover{background:#fff;border-color:#aaa69d}.pill.active{background:var(--black);color:#fff;border-color:var(--black)}.sync-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8e8a80;margin-right:7px}.sync-dot.synced{background:#2c6b4e}.home{padding:54px 34px 90px;max-width:1600px;margin:auto}.intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:36px;padding-bottom:42px;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--muted);margin-bottom:16px}.intro h1{font-size:clamp(42px,7vw,106px);font-weight:500;letter-spacing:-.065em;line-height:.86;margin:0}.intro h1 i{font-family:Georgia,serif;font-weight:400}.intro-copy{align-self:end;max-width:480px}.intro-copy p{font-size:14px;line-height:1.8;color:#44423d}.intro-copy .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:25px}.metric{padding:13px 4px 8px;border-top:1px solid var(--line)}.metric b{display:block;font-size:24px;font-weight:520}.metric span{font-size:10px;color:var(--muted);letter-spacing:.08em}.tools{display:flex;gap:10px;align-items:center;margin:26px 0 18px}.search{flex:1;max-width:540px;border:0;border-bottom:1px solid #aaa69d;background:transparent;padding:12px 0;font-size:15px;outline:0}.filter{display:flex;gap:6px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.card{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.45);min-height:220px;padding:19px;cursor:pointer;overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s var(--ease),background .32s,border-color .32s}.card:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(24,23,20,.08);background:var(--paper);border-color:#aaa69d}.card:after{content:"OPEN";position:absolute;right:18px;bottom:17px;font-size:9px;letter-spacing:.16em;opacity:0;transform:translateX(-5px);transition:.25s}.card:hover:after{opacity:.7;transform:none}.card-code{font:11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em;color:#66645e}.card h3{font-size:21px;font-weight:540;letter-spacing:-.025em;margin:22px 0 6px}.card .en{font:italic 13px Georgia,serif;color:#77746d}.card p{font-size:12px;line-height:1.65;color:#5f5c55;margin:20px 0 0}.card-footer{position:absolute;left:19px;bottom:17px;display:flex;gap:7px}.tag{font-size:8px;letter-spacing:.08em;border:1px solid #d0ccc4;border-radius:999px;padding:5px 7px;color:#77746d}.focus{height:calc(100vh - 68px);display:none;grid-template-rows:54px minmax(0,1fr)}.focus.active{display:grid}.focusbar{display:flex;align-items:center;gap:8px;padding:8px 22px;border-bottom:1px solid var(--line);background:#f4f3ef}.focus-id{margin-right:auto;display:flex;align-items:baseline;gap:12px}.focus-id b{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}.focus-id span{font-size:12px;color:var(--muted)}.workspace{position:relative;min-height:0}.workspace iframe{display:block;width:100%;height:100%;border:0;background:#f4f3ef}.feedback{position:fixed;z-index:60;right:18px;top:82px;width:min(440px,calc(100vw - 36px));background:#faf9f5;border:1px solid #cfcac1;box-shadow:0 28px 70px rgba(20,19,16,.16);padding:20px;transform:translateX(calc(100% + 40px));opacity:0;transition:.35s var(--ease)}.feedback.open{transform:none;opacity:1}.feedback-head{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line2);padding-bottom:13px}.feedback h3{font-size:18px;margin:0 0 3px}.feedback small{color:var(--muted)}.feedback textarea{width:100%;min-height:150px;resize:vertical;margin:18px 0 10px;border:0;border-bottom:1px solid #aaa69d;background:transparent;padding:10px 0;outline:0;line-height:1.7}.feedback-actions{display:flex;justify-content:space-between;align-items:center}.status{font-size:10px;color:var(--muted)}.savebtn{border:0;background:#151514;color:#fff;border-radius:999px;padding:11px 18px;cursor:pointer}.empty{grid-column:1/-1;padding:70px 10px;border-top:1px solid var(--line);text-align:center;color:var(--muted)}@media(max-width:1100px){.cards{grid-template-columns:repeat(3,1fr)}}@media(max-width:820px){.topbar{padding:0 16px}.brand span{display:none}.home{padding:34px 18px 70px}.intro{grid-template-columns:1fr}.intro-copy{max-width:none}.cards{grid-template-columns:repeat(2,1fr)}.filter{display:none}.focusbar{padding:8px 10px}.focus-id span{display:none}}@media(max-width:560px){.cards{grid-template-columns:1fr}.card{min-height:190px}.intro h1{font-size:54px}.top-actions .privacy{display:none}}