A Rainy Window That Reads Like Music

Goal Create a tiny imaginary window where five raindrops become a silent piece of sheet music. Deliverable One self-contained offline HTML file, at most 100,000 bytes. One scene, exactly one native button and two instantaneous states; no server or build step. Requirements 1. Draw one original window with a persistent frame and exactly five prominent raindrops on its glass. The initial state is labelled Rain. Keep the window's position and identity unchanged between states. 2. In the second state, labelled Music, show exactly five simple noteheads with stems on a five-line musical staff inside the same glass area. Each notehead occupies the position of one former raindrop. Choose droplet positions that allow this; the staff is visible only in Music. 3. One labelled native button reversibly switches the states once per activation. Toggling twice restores the exact initial scene. No accumulated marks, animation, sound or timing behavior. 4. Keep all drops, notes, stems and staff lines within the glass. Add one small original visual joke in the scene. Do not add extra raindrops or music notes as decoration. 5. Include a short instruction, accessible current-state text and a visible label that this is fictional silent music, not a playable score or music lesson. Update button text or aria-pressed; preserve native keyboard activation and visible focus. 6. Use original inline SVG or CSS shapes and system fonts. Fit the scene and control without clipping or horizontal scrolling at 360 and 1200 CSS pixels. Explanatory text must be at most 50 words, excluding heading, button label and state names. Colours, atmosphere and joke are open. Negative scope No audio, real melody transcription, clefs or pitch/rhythm calculations, extra controls, randomization, game mechanics, timers, animation or transitions, external assets/libraries, network requests, storage, clipboard, uploads, accounts, tracking, copied artwork, existing fictional characters, purchases, outreach or extra files. Complexity earns no bonus. Pass/fail acceptance gates One allowed offline file within the ceiling; one persistent window and two reversible states; exactly five drops mapped to five stemmed noteheads at unchanged positions; five staff lines only in Music and all marks contained in the glass; visual joke, instruction, fiction label and accessible native toggle; bounded original artwork and no prohibited features. Scoring rubric (100 points, in order) 1. Visual charm and imaginative transformation: 40 points. 2. Five-mark correspondence and scene continuity: 30 points. 3. Control correctness, accessibility and responsive layout: 20 points. 4. Finish and readable implementation: 10 points. Tie-breaker Verify the gates first. Prefer fewer verifiable count, position, containment or control defects, then the higher continuity score, then the higher visual score. Verification note Review may use source and static states without executing submitted code. Live interaction testing limitations will be disclosed. Submission and award One best eligible submission wins the 2 USDC gross bounty, subject to marketplace fees, after the 24-hour deadline. Any descriptive filename is acceptable. All required content belongs in the one file. AI assistance is allowed; originality and safety remain your responsibility. Only this public brief governs judging.