:root{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#302f46;background:#eeeae3;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}h1,h2,p{margin-top:0}a{color:inherit;text-decoration:none}.skip-link{position:absolute;top:-80px;left:12px;background:white;padding:12px;z-index:20}.skip-link:focus{top:12px}
.app-shell{min-height:100svh;background:#f4f1ea}.topbar{height:69px;border-bottom:1px solid #ddd9d0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,58px);background:#f9f7f0}.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:.06em;line-height:1}.brand img{width:33px;height:33px}.brand small{display:block;font-size:7px;letter-spacing:.28em;margin-top:4px}.topbar-note{font-size:10px;letter-spacing:.17em;margin:0;font-weight:700;color:#776e7c}.topbar-note span{margin:0 9px;color:#c7a8a6}.topbar-badge{border:1px solid #d7d2cb;border-radius:100px;padding:9px 12px;font-size:8px;letter-spacing:.11em;font-weight:700;white-space:nowrap}.live-dot{display:inline-block;width:6px;height:6px;background:#e5817e;border-radius:50%;margin-right:5px}
.board{max-width:1600px;margin:auto;padding:27px clamp(20px,4vw,58px) 12px;position:relative}.board:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;top:9%;right:18%;background:radial-gradient(circle,#ead2ff 0%,transparent 68%);opacity:.45;pointer-events:none}.board-heading{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 530px;gap:22px;align-items:end;margin-bottom:18px}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:800;color:#785992;margin-bottom:9px}.asterisk{font-size:16px;margin-right:6px;color:#e57592}.heading-copy h1{font-size:clamp(36px,3.7vw,57px);letter-spacing:-.065em;line-height:1.2;margin:0 0 6px;font-weight:800}.heading-copy h1 em{font-style:normal;color:#e27c83}.heading-copy>p:last-child{font-size:11px;line-height:1.7;letter-spacing:.06em;color:#777482;margin:0}
.mode-widget{background:#fffefa;border:1px solid #e6e1d9;border-radius:23px;padding:15px 17px 17px;box-shadow:0 8px 30px rgba(67,55,72,.04)}.widget-title{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-weight:800;letter-spacing:.17em;color:#777084}.widget-star{font-size:15px;color:#e99a91;line-height:1}.mode-buttons{display:flex;gap:7px;margin-top:12px}.mode-button{flex:1;min-width:0;padding:11px 5px;border:1px solid #e6e2dc;background:#f7f5f1;color:#746f7e;border-radius:11px;font-size:11px;font-weight:800;white-space:nowrap;transition:transform .2s,background .2s,color .2s}.mode-button span{font-size:17px;vertical-align:-1px;margin-right:3px}.mode-button:hover{transform:translateY(-2px)}.mode-button.is-active{background:#393052;color:#fff;border-color:#393052}
.widget-grid{display:grid;grid-template-columns:minmax(210px,22%) minmax(420px,1fr) minmax(245px,22%);gap:14px;align-items:stretch;min-height:540px}.widget{border:1px solid #e7e3dc;background:#fffefa;border-radius:24px;box-shadow:0 13px 36px rgba(57,47,71,.055);min-width:0;overflow:hidden}.palette-widget{padding:19px 17px 16px;display:flex;flex-direction:column}.palette-heading h2{font-size:22px;letter-spacing:-.055em;line-height:1.3;margin:20px 0 6px}.palette-heading p{font-size:9px;color:#85818b;letter-spacing:.02em;margin-bottom:14px}.swatch-list{display:flex;flex-direction:column;gap:8px}.swatch{width:100%;border:1px solid #e9e5e2;background:#faf9f6;border-radius:12px;display:flex;align-items:center;text-align:left;padding:7px;gap:9px;min-height:57px;transition:transform .2s,box-shadow .2s,border-color .2s;touch-action:none;user-select:none;cursor:grab}.swatch:hover{transform:translateX(3px);box-shadow:0 5px 12px rgba(48,36,56,.08)}.swatch.is-selected{border-color:#55446a;box-shadow:0 0 0 1px #55446a}.swatch:active{cursor:grabbing}.swatch-patch{width:43px;height:41px;border-radius:8px;background:var(--swatch-color);flex:none;position:relative;overflow:hidden}.swatch-patch:after{content:"";position:absolute;inset:5px 7px 8px 20px;border-radius:50%;border:1px solid rgba(255,255,255,.65);transform:rotate(-25deg)}.swatch-label{display:flex;flex-direction:column;gap:4px;min-width:0}.swatch-label strong{font-size:12px;letter-spacing:.02em;white-space:nowrap}.swatch-label small{font-size:9px;letter-spacing:.08em;color:#85808a}.swatch-arrow{margin-left:auto;margin-right:5px;font-size:17px;color:#9e91a1}.palette-foot{margin-top:auto;padding-top:15px;border-top:1px solid #eee9e3;color:#9b8e9a;font-size:8px;letter-spacing:.03em}.palette-foot span{font-size:17px;vertical-align:-3px;margin-right:4px;color:#d989a0}
.canvas-widget{padding:11px;background:#fffdf8;display:flex;flex-direction:column}.canvas-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 12px}.canvas-head span{font-size:9px;letter-spacing:.15em;font-weight:800;color:#807b8a}.canvas-head h2{font-size:18px;margin:5px 0 0;letter-spacing:-.04em}.canvas-counter{padding:8px 10px;border:1px solid #e8e2de;border-radius:100px;font-size:8px!important}.color-canvas{position:relative;min-height:415px;flex:1;border-radius:17px;overflow:hidden;background:linear-gradient(145deg,var(--scene-top),var(--scene-bottom));isolation:isolate;transition:background .45s;outline-offset:4px}.color-canvas:focus-visible{outline:3px solid #5344a0}.canvas-grain{position:absolute;inset:0;z-index:4;opacity:.35;background-image:url('assets/grain.svg');background-size:220px;pointer-events:none}.canvas-orbit{position:absolute;border:1px solid rgba(255,255,255,.5);border-radius:50%;aspect-ratio:1;pointer-events:none}.orbit-back{width:77%;top:-38%;left:-18%}.orbit-front{width:75%;right:-26%;bottom:-56%;border-width:2px}.shape{position:absolute;transition:transform .5s,background .45s}.shape-arch{width:60%;height:107%;right:9%;bottom:-37%;background:var(--scene-accent);border-radius:48% 48% 0 0;transform:rotate(-24deg);box-shadow:inset 20px 20px 45px rgba(255,255,255,.3),25px 25px 45px rgba(67,33,77,.12)}.shape-sun{width:var(--bloom);aspect-ratio:1;border-radius:50%;left:19%;top:13%;background:var(--spot);box-shadow:0 0 0 16px rgba(255,255,255,.14),0 28px 40px rgba(68,31,56,.18),inset -24px -16px 27px rgba(255,255,255,.18);z-index:2}.shape-sun:after{content:"";position:absolute;width:21%;aspect-ratio:1;left:37%;top:37%;border-radius:50%;border:1px solid rgba(255,255,255,.6)}.shape-petal{width:15%;height:27%;border-radius:100% 0 100% 0;background:var(--petal);z-index:2;box-shadow:0 12px 18px rgba(68,31,56,.09)}.petal-one{left:5%;bottom:15%;transform:rotate(35deg)}.petal-two{right:17%;top:8%;transform:rotate(-25deg) scale(.65)}.canvas-word{position:absolute;left:7%;bottom:13%;z-index:3;color:var(--canvas-text);text-shadow:0 1px 15px rgba(25,25,30,.06)}.canvas-word span{display:block;font-size:clamp(24px,2.7vw,39px);font-weight:800;letter-spacing:-.07em;line-height:1.3}.canvas-word small{display:block;margin-top:11px;font-size:8px;font-weight:800;letter-spacing:.25em}.drop-hint{position:absolute;right:18px;bottom:17px;color:var(--canvas-text);font-size:9px;letter-spacing:.1em;z-index:4;opacity:.75}.color-canvas.is-drop-target{outline:4px dashed #fff;outline-offset:-12px}.canvas-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 8px 4px;font-size:10px;color:#625d6c}.canvas-foot strong{font-weight:700}.tiny-sun{color:#d07e9d;font-size:15px;vertical-align:-2px}.canvas-foot>span:last-child{letter-spacing:.08em;font-weight:800;white-space:nowrap}
.side-widgets{display:flex;flex-direction:column;gap:14px;min-width:0}.note-widget{height:54%;padding:17px;display:flex;flex-direction:column}.note-color{height:72px;margin:12px 0 10px;border-radius:12px;background:var(--spot);position:relative;overflow:hidden;transition:background .45s}.note-color:before{content:"";position:absolute;width:100px;height:100px;right:-20px;top:-50px;border:1px solid rgba(255,255,255,.7);border-radius:50%;box-shadow:0 0 0 16px rgba(255,255,255,.1)}.note-hole{position:absolute;width:19px;height:19px;border:3px solid rgba(255,255,255,.8);border-radius:50%;left:19px;top:22px}.note-widget h2{font-size:23px;letter-spacing:-.04em;margin:0 0 6px}.note-widget>p{font-size:10px;color:#807983;line-height:1.8;margin-bottom:6px;min-height:37px}.note-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:auto;padding-top:7px;border-top:1px solid #ebe6e2}.note-bottom code{font-family:inherit;font-size:11px;letter-spacing:.05em;font-weight:800}.note-bottom button{border:0;background:none;color:#8c6580;font-size:8px;font-weight:800;white-space:nowrap;padding:4px 0}
.tune-widget{flex:1;padding:17px;display:flex;flex-direction:column;background:#e7dcf7;border-color:#dfd2ef}.tune-widget .widget-title{color:#6f6085}.tune-widget h2{font-size:18px;margin:17px 0 14px}.tune-widget label{font-size:10px;font-weight:800;color:#685e77;display:flex;justify-content:space-between}.tune-widget input{width:100%;accent-color:#5b4880;margin:9px 0 12px}.tune-actions{display:flex;gap:7px;margin-top:auto}.tune-actions button{flex:1;border:1px solid #cdbde3;background:#f7f2ff;color:#5c4a73;border-radius:9px;font-size:9px;font-weight:800;padding:10px 5px;white-space:nowrap}.tune-actions button:first-child{background:#403057;color:#fff;border-color:#403057}.tune-actions button[aria-pressed="true"]{background:#ffca90;border-color:#ffca90;color:#553b4b}.tune-actions button span{font-size:14px;vertical-align:-1px}
.board-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;color:#938f97;font-size:8px;letter-spacing:.1em;font-weight:700}.board-footer p{margin:0;color:#785e83;font-size:9px;letter-spacing:.03em}.board-footer span:last-child span{color:#df8f9d;font-size:13px}
.drag-ghost{position:fixed;z-index:50;width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.8);box-shadow:0 12px 25px rgba(35,27,54,.25);pointer-events:none;transform:translate(-50%,-50%) scale(1.05)}
body[data-mode="morning"]{--scene-top:#ffeadf;--scene-bottom:#d9a8dc;--scene-accent:#a5decb;--spot:#e7a0a1;--petal:#ffca72;--canvas-text:#453c5f;--bloom:32%}
body[data-mode="afternoon"]{--scene-top:#ffe6ac;--scene-bottom:#e69b8c;--scene-accent:#7ebdcc;--spot:#e87d68;--petal:#fee5a7;--canvas-text:#4c3b50;--bloom:32%}
body[data-mode="evening"]{--scene-top:#334877;--scene-bottom:#a270ad;--scene-accent:#d899c2;--spot:#f2c375;--petal:#9ccecd;--canvas-text:#fff5eb;--bloom:32%}
@media(max-width:1150px){.board-heading{grid-template-columns:1fr}.mode-widget{max-width:600px}.widget-grid{grid-template-columns:minmax(200px,28%) 1fr;min-height:560px}.side-widgets{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.note-widget{height:auto;min-height:220px}.tune-widget{min-height:220px}.color-canvas{min-height:420px}}
@media(max-width:700px){.topbar{height:62px}.topbar-note,.topbar-badge{display:none}.board{padding:24px 15px 20px}.board-heading{gap:20px}.heading-copy h1{font-size:clamp(32px,8vw,44px)}.heading-copy>p:last-child{font-size:10px}.mode-widget{padding:13px}.mode-button{font-size:9px}.mode-button span{display:block;font-size:17px;margin:0 0 3px}.widget-grid{display:flex;flex-direction:column;min-height:0}.palette-widget{order:1;padding:17px}.palette-heading h2{font-size:20px;margin:12px 0 5px}.palette-heading h2 br{display:none}.swatch-list{display:grid;grid-template-columns:1fr 1fr}.swatch{min-height:55px}.swatch-patch{width:37px;height:37px}.swatch-label strong{font-size:10px}.swatch-label small{font-size:8px}.swatch-arrow{display:none}.palette-foot{margin-top:13px}.canvas-widget{order:2}.color-canvas{min-height:405px}.canvas-word span{font-size:29px}.side-widgets{order:3;display:grid;grid-template-columns:1fr 1fr}.board-footer{flex-wrap:wrap;justify-content:center}.board-footer span:last-child{display:none}}
@media(max-width:480px){.side-widgets{grid-template-columns:1fr}.note-widget{min-height:245px}.note-color{height:82px}.tune-widget{min-height:175px}.color-canvas{min-height:375px}.canvas-head h2{font-size:17px}.canvas-word{bottom:14%}.canvas-word span{font-size:26px}.drop-hint{font-size:8px}.board-footer span:first-child{display:none}.swatch-list{gap:6px}.swatch{padding:5px;gap:6px}.swatch-patch{width:34px;height:34px}.swatch-label strong{font-size:9px}.swatch-label small{font-size:7px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}