@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans','Noto Sans JP',sans-serif;color:#283b36;background:#f6f4ef;font-synthesis:none;--green:#2f6355;--line:#e4e8df}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}.shell{width:100%;max-width:1400px;height:100dvh;margin:auto;padding:0 20px 14px;display:flex;flex-direction:column;padding-bottom:max(14px,env(safe-area-inset-bottom))}header{height:48px;flex-shrink:0;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-size:25px;font-weight:700;letter-spacing:-1px}.logo{position:relative;color:var(--green);font-size:23px;width:31px}.logo span{position:absolute;left:11px;color:#a2bba0;opacity:.85}.brand-note{font-size:10px;letter-spacing:.05em;font-weight:500;color:#7c8881;border-left:1px solid #d5dcd2;padding-left:12px;margin-left:3px}main{flex:1;min-height:0}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;height:100%;min-height:0}.side{display:flex;flex-direction:column;gap:12px;min-height:0}.card{background:#fff;border:1px solid var(--line);border-radius:13px;min-width:0}.room-card,.timer-card{padding:16px}.room-card{flex-shrink:0;display:grid;grid-template-columns:1fr auto;gap:10px}.room-card>.section-label,.room-card>form,.room-card>#invitation,.request{grid-column:1/-1}.section-label{font-size:11px;color:#81907c;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px}.live{font-size:10px;display:flex;align-items:center;gap:5px}.live:before{content:'';width:6px;height:6px;border-radius:50%;background:#c5cec3}.live.online{color:#42816c}.live.online:before{background:#649b7e}.live.pending:before{background:#c1a359}#join-form{display:flex;gap:8px;min-width:0;align-items:center}input,textarea,select{font:inherit;color:inherit;border:1px solid #e2e7de;background:#fcfcf9;border-radius:7px;font-size:12px;min-width:0}input{width:100%;padding:10px}#name{flex:1;width:0}button{font:inherit;cursor:pointer;border:0;border-radius:7px;transition:background .15s,transform .15s;font-size:11px;font-weight:500;padding:10px 12px;touch-action:manipulation;white-space:nowrap;min-height:40px}button:hover:enabled{filter:brightness(.96)}button:active:enabled{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #78a88b;outline-offset:2px}.primary{background:var(--green);color:#fff}.primary.full{display:flex;gap:6px;justify-content:center;align-items:center;flex-shrink:0}.secondary,.icon-button{background:#f0f3ed;color:#526b59}.copy-row{display:flex;gap:7px}.copy-row input{flex:1;width:0;font-size:10px}.status-message{grid-row:auto;grid-column:1;align-self:center;font-size:10px;line-height:1.5;color:#82907e;margin:0;overflow-wrap:anywhere}.status-message.error{color:#ad625b}.text-button{grid-column:2;grid-row:auto;padding:0 2px;background:none;color:#7e8b7b;font-size:10px;min-height:24px;align-self:center}#leave:not([hidden])+.status-message{grid-row:3;grid-column:1}#leave:not([hidden]){grid-row:3}.room-card:has(.request:not([hidden])) #leave,.room-card:has(.request:not([hidden])) .status-message,.room-card:has(#new-invite:not([hidden])) #leave,.room-card:has(#new-invite:not([hidden])) .status-message{grid-row:4}.request{padding:9px;border-radius:8px;background:#f4f6ee}.request p{font-size:11px;margin:0 0 8px;overflow-wrap:anywhere}.button-row{display:flex;gap:8px}.button-row button{flex:1;min-height:34px;padding:7px 10px}.timer-card{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:14px}.timer-card>.section-label{margin-bottom:auto}.timer-dial{height:clamp(80px,22vh,165px);width:clamp(80px,22vh,165px);border-radius:50%;border:1px solid #e1e7db;outline:4px solid #f7f9f3;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:8px auto;background:radial-gradient(circle,#fff 45%,#f9fbf5 100%);flex-shrink:1}#timer-state{font-size:7px;letter-spacing:.1em;color:#8a9a86}#time{font-size:clamp(32px,5vh,45px);letter-spacing:-1px;font-weight:500;line-height:1.5;font-variant-numeric:tabular-nums}.timer-note{font-size:9px;color:#83917e;white-space:nowrap}.duration-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}.duration-row label{font-size:11px;color:#81907c}.duration-row select{padding:7px 10px;background:#fff;width:100px}.controls-group{display:grid;gap:8px}.timer-controls{display:grid;grid-template-columns:1fr 1.25fr 36px;gap:6px}.action-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px}.icon-button{padding:4px;font-size:22px}.complete{background:#edf3e8;color:#517b55}.stop{background:#fcf0ed;color:#b57765}.action-controls span{margin-right:4px}.chat-card{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.chat-heading{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.chat-heading h2{font-size:14px;font-weight:500;margin:0}.people{font-size:10px;letter-spacing:.1em;border:1px solid #e4e9df;background:#f9faf6;border-radius:20px;padding:5px 10px;color:#83917e}.messages{flex:1;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:16px;scroll-behavior:smooth}.empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#8e9a89}.empty h3{font-size:14px;font-weight:500;margin:0 0 8px;color:#64795f}.empty p{font-size:11px;line-height:1.8;margin:0}.composer{display:flex;gap:8px;margin:0 12px 12px;padding:7px 9px 7px 12px;background:#f8f9f5;border:1px solid #e8ece1;border-radius:10px;align-items:flex-end;flex-shrink:0}.composer textarea{resize:none;border:0;background:none;flex:1;min-width:0;max-height:80px;min-height:33px;padding:6px 0;line-height:1.6}.composer textarea:focus-visible{outline:0}.composer:focus-within{outline:2px solid #a5bfa0}.send-button{width:34px;height:34px;min-height:34px;background:var(--green);color:white;padding:0;font-size:21px;flex-shrink:0}.bubble-row{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:14px}.bubble-row.self{align-items:flex-end}.bubble-meta{font-size:9px;color:#899682;margin:0 4px 5px}.bubble{background:#f0f4ea;color:#3a513a;padding:9px 12px;border-radius:3px 12px 12px 12px;max-width:85%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}.self .bubble{background:#356856;color:#fff;border-radius:12px 3px 12px 12px}.system-event{text-align:center;color:#87967e;font-size:10px;line-height:1.6;margin:12px auto;padding:5px 10px;background:#f8faf4;border-radius:16px;width:fit-content;max-width:95%;overflow-wrap:anywhere}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#2d4e3f;color:#fff;border-radius:10px;padding:12px 20px;font-size:12px;box-shadow:0 8px 30px #264a3c26;z-index:10;max-width:90vw}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}[hidden]{display:none!important}
@media(max-width:650px){.shell{padding:0 10px max(8px,env(safe-area-inset-bottom))}header{height:38px}.brand{font-size:22px}.logo{font-size:21px;width:28px}.workspace{display:flex;flex-direction:column;gap:8px}.side{gap:8px;flex-shrink:0}.room-card{padding:10px 12px;gap:7px}.room-card>.section-label{font-size:10px}input,textarea,select{font-size:16px}#name{font-size:16px;padding:8px 10px}.primary.full{font-size:11px;padding:9px 10px}.timer-card{display:grid;grid-template-columns:minmax(0,1fr) 94px;gap:7px 10px;padding:9px 12px;flex:initial}.timer-card>.section-label{display:none}.timer-dial{height:auto;width:auto;min-height:32px;outline:none;border:0;background:none;border-radius:0;margin:0;align-items:flex-start;justify-content:center}#timer-state,.timer-note{display:none}#time{font-size:30px;line-height:1.1}.duration-row{margin:0;gap:5px}.duration-row label{font-size:10px}.duration-row select{width:73px;padding:4px;font-size:14px}.controls-group{grid-column:1/-1;grid-template-columns:1.55fr 1fr;gap:6px}.timer-controls{grid-template-columns:1fr 1.35fr 30px;gap:4px}.action-controls{gap:4px}.controls-group button{font-size:10px;padding:7px 4px;min-height:38px}.controls-group .icon-button{font-size:21px;padding:0}.action-controls span{margin-right:2px}.chat-card{flex:1;height:auto;min-height:0}.chat-heading{padding:8px 12px}.chat-heading h2{font-size:12px}.people{padding:3px 8px;font-size:9px}.messages{padding:12px}.composer{margin:0 8px 8px;padding:5px 7px 5px 10px}.composer textarea{font-size:16px;padding:4px 0;max-height:65px}.empty h3{font-size:12px}.empty p{font-size:10px}.status-message{font-size:9px}.text-button{font-size:9px}}
@media(max-height:550px) and (min-width:651px){.timer-card{gap:7px;padding:12px}.timer-dial{border:0;outline:0;height:auto;width:auto;margin:0}.timer-note{display:none}#timer-state{font-size:6px}#time{font-size:32px}.controls-group{grid-template-columns:1.5fr 1fr}.timer-controls{grid-template-columns:1fr 1.2fr 26px}.controls-group button{font-size:9px;padding:5px;min-height:32px}.timer-card>.section-label{margin-bottom:0}.duration-row{margin-top:0}.room-card{padding:12px}}
@media(max-height:500px) and (max-width:650px){header{height:30px}.room-card{padding:7px 10px;gap:5px}.timer-card{padding:6px 10px;gap:5px}#timer-state,.timer-note{display:none}.controls-group button{min-height:32px}.chat-heading{padding:5px 10px}}

#new-invite{grid-column:1/-1}